Question

如何根据滚动设置菜单？

我做了一个片段来说明代码。当我滚动他所在位置的页面时，我打开菜单。我希望菜单跟踪滚动页面。

我该怎么做？

		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>

Answer 1

这可以解决您的问题：

$(window).scroll(function() {

    $("#menu").removeClass("show");  
  
});

Answer 2

如果您想要的是将菜单固定在某个位置，即使您滚动也始终可见，您需要做的是将其位置从absolute更改为fixed诀窍：

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{
        /* LINE CHANGED */
		position: fixed;
		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>

如何离开滚动条附带的菜单？

2 个答案: