隐藏菜单向下滚动,然后显示菜单时,向上滚动达到0 [javascript]不为我工作
Hide menu on scroll down then show the menu when the scroll up reach 0 [javascript] not working for me
当我试图创建菜单效果时,我遇到了一个问题。我已经从其他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');
});
然后滚动,什么也没发生。我也试着把你的答案粘贴在普通的划痕上,但似乎是一样的:什么也没发生。
首先,连接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();
}
});
});
您正在检查静态元素(d,即.big-wrapper)的位置。如果你想隐藏你的浮动菜单,那么你应该这样做:
$(window).scroll(function () {
var d = $('.nav-main');
if (d.offset().top < 400) {
$('.nav-main').fadeIn();
} else {
$('.nav-main').fadeOut();
}
});
相关文章:
- 幻灯片滚动javascript不起作用
- 谷歌地图API-如何停止滚动(JavaScript)
- slim向左和向右滚动javascript,而不是向上和向下滚动
- 滞后向左滚动Javascript
- 在聚焦文本输入的同时使用箭头键滚动(Javascript)
- 无限滚动 JavaScript 未运行
- 平滑滚动 JavaScript 影响模态功能
- 检测鼠标滚轮的使用情况,但保持页面滚动(javascript/jquery)
- 为什么不是't我的Parallax滚动JavaScript代码正在工作
- 平滑滚动Javascript滚动减去100px(固定标题导航)
- 标头不是't滚动-Javascript
- 可以't在webview中加载页面后滚动javascript映射
- 自定义滚动javascript困惑
- Aptana Studio 3 MAC OS在滚动JavaScript文件时间歇性死机
- 平滑滚动javascript禁用超链接
- 平滑滚动javascript代码与Bootstrap标签代码混淆
- 禁用水平滚动JavaScript
- 没有滚动javascript导致不工作的文本输入?iPhone Web App
- 添加渐变过渡到丹尼尔诺兰的img滚动javascript
- 你能得到用户的滚动位置,每次他们滚动JavaScript/jQuery