向下滚动隐藏菜单然后在向上滚动到0 [javascript]时对我显示菜单 [英] hide menu on scroll down then show the menu when the scroll up reach 0 [javascript] not working for me
问题描述
我有，当我试图创建一个菜单效果的问题...我已经从其他得到这个JavaScript代码粘贴到我的代码，但痛心地说，我和我不要不工作不知道是什么原因..
I've got a problem when I'm trying to create a menu effects... I've got this javascript code from the other and paste into my code but sad to say doesn't work for me and i don't know what is the reason..
这是我的代码
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
javascript for the menu
$(window).scroll(function () {
var d = $('.big-wrapper');
if (d.offset().top < 400) {
$('.nav-main').fadeIn();
} else {
$('.nav-main').fadeOut();
}
});
谢谢......
现在我有问题是什么..当我在javascript文件上这样做..
and now I've got what the problem it is.. when i do this on javascript file..
alert('hello');
当我重新加载页面时弹出javascript然后我这样做..
javascript popup when i reload the page then when I do this..
$(window).scroll(function () {
alert('hello');
});
然后滚动..没有任何事情发生.....
i也试图粘贴你的答案简单划伤，但似乎一样......没有任何反应。
then scroll.. nothing happen..... i also tried to paste your answer on plain scratch but its seems the same.. nothing happen.
推荐答案
首先，连接jquery库：
First of all, connect jquery library:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
现在，你应该得到 body 滚动位置，并验证它是否低于所需值（在您的情况下为400）。这应该在 document 准备。这是小提琴： http://jsfiddle.net/h06zpy12/1/
Now, you should get body scroll postion, and verify if it is lower than needed value (400 in your case). This should be done when document is "ready". Here is the fiddle: http://jsfiddle.net/h06zpy12/1/
$( document ).ready(function() {
$(window).scroll(function () {
if ($('body').scrollTop() < 400) {
$('.nav-main').fadeIn();
} else {
$('.nav-main').fadeOut();
}
});
});
这篇关于向下滚动隐藏菜单然后在向上滚动到0 [javascript]时对我显示菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
