在向下滾動時隱藏菜單，然后在向上滾動達到0時顯示菜單[javascript]對我不起作用

Question

我有，當我試圖創建一個菜單效果的問題...我已經得到了來自其他這段JavaScript代碼粘貼到我的代碼，但很可惜，我沒有工作，我不知道是什么原因..

這是我的代碼

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NMSC</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<script type="text/javascript" src="js/nav-slide.js">
</head>

 <body>
 <nav class="nav-main">
 <div class="logo">Website</div>
 <ul>
    <li><a href="#" class="nav-item">Home</a></li>
    <li><a href="#" class="nav-item">Library System</a></li>
    <li><a href="#" class="nav-item">Rules & Regulation</a></li>
    <li><a href="#" class="nav-item">Service Hours</a></li>
    <li><a href="#" class="nav-item">The Library</a></li>
</ul>
</nav>

<div class="big-wrapper">
<header>
    <h1>NMSC Online Library</h1>
</header>

</div>
</body>
</html>

的CSS

.nav-main {
z-index: 99;
position: fixed;
width: 100%;
background-color: #222;
height: 50px;
color: #fff;

box-shadow: 5px 4px 5px #333333; 
-webkit-box-shadow: 5px 4px 5px #333333; 
-moz-box-shadow: 5px 4px 5px #333333;
}

菜單的javascript

$(window).scroll(function () {
    var d = $('.big-wrapper'); 
    if (d.offset().top < 400) {
       $('.nav-main').fadeIn();       
    } else {
       $('.nav-main').fadeOut();
    }
});

謝謝...

現在我有什么問題了..當我在javascript文件上這樣做時..

alert('hello');

當我重新加載頁面然后執行此操作時，會彈出javascript。

$(window).scroll(function () {
 alert('hello');
});

然后滾動..什么都沒有發生.....我也試圖將您的答案粘貼到普通的暫存器上，但似乎相同..什么也沒有發生。

Answer 1

您正在檢查靜態元素（d，即.big-wrapper）的位置。 如果要隱藏浮動菜單，則應這樣做：

$(window).scroll(function () {
var d = $('.nav-main'); 
if (d.offset().top < 400) {
   $('.nav-main').fadeIn();

} else {
   $('.nav-main').fadeOut();
      }
});

Answer 2

首先，連接jquery庫：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

現在，您應該獲得body滾動位置，並驗證它是否低於所需值（在您的情況下為400）。 當document “就緒”時，應執行此操作。 這是小提琴： http : //jsfiddle.net/h06zpy12/1/

$( document ).ready(function() {    
    $(window).scroll(function () {     
        if ($('body').scrollTop() < 400) {
           $('.nav-main').fadeIn();

        } else {
           $('.nav-main').fadeOut();
        }
    });
 });

在向下滾動時隱藏菜單，然后在向上滾動達到0時顯示菜單[javascript]對我不起作用

問題描述

2 個解決方案

解決方案1
0 2015-09-09 13:33:41

解決方案2
0 已采納 2015-09-09 13:33:48

在向下滾動時隱藏菜單，然后在向上滾動達到0時顯示菜單[javascript]對我不起作用

問題描述

2 個解決方案

解決方案1 0 2015-09-09 13:33:41

解決方案2 0 已采納 2015-09-09 13:33:48

解決方案1
0 2015-09-09 13:33:41

解決方案2
0 已采納 2015-09-09 13:33:48