How to make an element follow the scroll bar?

Question

How to make an element follow the scroll bar?

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

How do I get my menu set according to the scroll?

I made a snippet to exemplify the code. I open the menu, when I roll the page it stays in its position. I want the menu to follow the scrolling of the page.

How can I do this?

var nav = document.getElementById("menu");
var showMenu = document.getElementById("abrir");
var hideMenu = document.getElementById("fechar");
showMenu.addEventListener("click", function() {
  nav.classList.add("show");
});

hideMenu.addEventListener("click", function() {
  nav.classList.remove("show");
});

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
#site {
  position: absolute;
  width: 100%;
  height: 500px;
}
#fundo_site {
  position: absolute;
  width: 100%;
  height: auto;
}
#menu {
  position: absolute;
  left: -292px;
  height: 100%;
  width: 15%;
  transition: left 0.5s linear;
}
#img_menu {
  width: 100%;
  height: 100%;
}
#menu.show {
  left: 0;
}
#bt_menu {
  width: 20%;
  height: 20%;
  margin: 15px;
}
p {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  color: black;
  left: 10px;
  top: -5px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Meu Site</title>
  <link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="site">
    <img id="fundo_site" src="http://i.stack.imgur.com/gINau.jpg.jpg"><aid="abrir" style="position:absolute;">
      <img id="bt_menu" src="img/bt.png">
    </a>
  </div>

  <div id="menu">
    <p id="fechar" style="position:absolute;"><strong>X</strong>
    </p>
    <img id="img_menu" src="http://i.stack.imgur.com/DiAvt.jpg.jpg"></div></body></html>

html css rolamento

asked by anonymous 11.02.2016 / 20:38

2 answers

2

Just do the following in your CSS code #menu into position change the code absolute to fixed .

    #menu{
		position: fixed;
		left: -292px;
		height:100%;
		width:15%;
		transition: left 0.5s linear;
	}

11.02.2016 / 21:08

Adjacent values How to override CSS from PrimeFaces added via Maven?

score 1 · Accepted Answer

Use position: fixed; in the #menu selector.

		var nav = document.getElementById("menu");
		var showMenu = document.getElementById("abrir");
		var hideMenu = document.getElementById("fechar");
		showMenu.addEventListener("click", function () {
		  nav.classList.add("show");
		});

		hideMenu.addEventListener("click", function () {
		  nav.classList.remove("show");
		});

	html, body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}	

	#site{		
		position: absolute;
		width: 100%;
		height: 500px;
		
	}

	#fundo_site{
		position: absolute;
		width: 100%;
		height: auto;
	}

	#menu{
		left: -292px;
		height:100%;
		width:15%;
		transition: left 0.5s linear;
		position: fixed;
	}

	#img_menu{
		width: 100%;
		height: 100%;
	}

	#menu.show{
		left:0;
	}

	#bt_menu{
		width:20%;
		height:20%;
		margin: 15px;
	}


	p{
		font-family: 'Raleway', sans-serif;			
		font-size: 20px;
		color: black;
		left: 10px;
		top: -5px;
	}

<!DOCTYPE html>
<html>
<head>
	<title>Meu Site</title>

		<link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
		
	

</head>
<body>
	

	<div id="site">
			<img id="fundo_site" src="http://i.stack.imgur.com/gINau.jpg.jpg"><aid="abrir" style="position:absolute;"> <img id="bt_menu" src="img/bt.png"></a>
	</div>
	


 	<div id="menu">		
		<p id="fechar" style="position:absolute;"><strong>X</strong></p>
		<img id="img_menu" src="http://i.stack.imgur.com/DiAvt.jpg.jpg">
	</div>
	
</body>
</html>