How to make an element track the scrollbar?

Asked

Viewed 6,364 times

3

How do I set my menu to scroll?

I made a snippet to exemplify the code. I open the menu, when I scroll the page it is in its position. I want the menu to accompany the scrolling of the page.

How can I do that?

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">
    <a id="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 rolling

2 answers

2

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

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

  • As I am new I have no privileges to suggest correcting the previous answer, so I answered with another question. I hope my friend Yure is not offended.

1


Use position: Fixed; on the selector #menu.

		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">
			<a id="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>

  • What a superhero thing you imple heheheh, thank you!

Browser other questions tagged html css rolling

You are not signed in. Login or sign up in order to post.