向下滚动时隐藏菜单，然后在向上滚动达到 0 时显示菜单 [javascript] 不适合我答案

【问题标题】：hide menu on scroll down then show the menu when the scroll up reach 0 [javascript] not working for me向下滚动时隐藏菜单，然后在向上滚动达到 0 时显示菜单 [javascript] 不适合我
【发布时间】：2015-12-05 11:45:47
【问题描述】：

我在尝试创建菜单效果时遇到了问题...我从另一个那里得到了这个 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');
});

然后滚动..什么都没有发生..... 我也尝试将您的答案粘贴在普通的草稿上，但它似乎相同.. 没有任何反应。

【问题讨论】：

标签： javascript jquery html css javascript-events

【解决方案1】：

首先，连接jquery库：

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

现在，您应该获得body 滚动位置，并验证它是否低于所需值（在您的情况下为 400）。这应该在document 是"ready" 时完成。这是小提琴：http://jsfiddle.net/h06zpy12/1/

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

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

【讨论】：

对我不起作用...将演示中的 html、css、js 粘贴到暂存文件中...好吧..什么也没发生...这有什么问题？

【解决方案2】：

您正在检查静态元素（d，即 .big-wrapper）的位置。如果你想隐藏你的浮动菜单，那么你应该这样做：

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

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

【讨论】：

现在我知道了问题所在..当我在 javascript 文件上执行此操作时.. alert('hello');当我重新加载页面然后当我这样做时弹出javascript.. $(window).scroll(function () { alert('hello'); });然后滚动..什么都没有发生......我也试图将你的答案粘贴在普通的草稿上，但它似乎是一样的......什么都没有发生。