2016-02-11 10 views
0

如何根據滾動離開設置菜單?如何留下伴隨滾動條的菜單?

我做了一段代碼來說明代碼。當我滾動他所在的頁面時,我打開菜單。我想要菜單跟蹤滾動頁面。

我該怎麼做?

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

 
\t \t hideMenu.addEventListener("click", function() { 
 
\t \t nav.classList.remove("show"); 
 
\t \t });
\t html, body{ 
 
\t \t padding: 0; 
 
\t \t margin: 0; 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t } \t 
 

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

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

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

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

 
\t #menu.show{ 
 
\t \t left:0; 
 
\t } 
 

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

 

 
\t p{ 
 
\t \t font-family: 'Raleway', sans-serif; \t \t \t 
 
\t \t font-size: 20px; 
 
\t \t color: black; 
 
\t \t left: 10px; 
 
\t \t top: -5px; 
 
\t }
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Meu Site</title> 
 

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

 
</head> 
 
<body> 
 
\t 
 

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

 

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

+1

第一步是找出一些Web開發和編程術語Zkk。舉個例子,在我看完你的問題兩次之後,我不知道你在問什麼。我通常被認爲是一個經驗豐富的全棧開發人員。 –

+0

打開側面菜單並向下滾動頁面!你會看到菜單保留在頁面的頂部。我想,當你滾動頁面時,將菜單放在一起!我想要菜單伴隨着滾動頁面。 – Zkk

回答

0

如果你想要的是有固定在一個位置的菜單,因此它總是可見,甚至當你滾動,你所要做的就是改變從absolute其位置fixed什麼,會做的伎倆:

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

 
\t \t hideMenu.addEventListener("click", function() { 
 
\t \t nav.classList.remove("show"); 
 
\t \t });
html, body{ 
 
\t \t padding: 0; 
 
\t \t margin: 0; 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t } \t 
 

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

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

 
\t #menu{ 
 
     /* LINE CHANGED */ 
 
\t \t position: fixed; 
 
\t \t left: -292px; 
 
\t \t height:100%; 
 
\t \t width:15%; 
 
\t \t transition: left 0.5s linear; 
 
\t } 
 

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

 
\t #menu.show{ 
 
\t \t left:0; 
 
\t } 
 

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

 

 
\t p{ 
 
\t \t font-family: 'Raleway', sans-serif; \t \t \t 
 
\t \t font-size: 20px; 
 
\t \t color: black; 
 
\t \t left: 10px; 
 
\t \t top: -5px; 
 
\t }
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Meu Site</title> 
 

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

 
</head> 
 
<body> 
 
\t 
 

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

 

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

0

這可以解決你的問題:

$(window).scroll(function() { 
 

 
    $("#menu").removeClass("show"); 
 
    
 
});