使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单？
Posted
技术标签:
【中文标题】使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单？【英文标题】：Fixing menu on top with jquery. menu doesn't appears later when scrolled down? 【发布时间】：2015-03-03 19:58:06 【问题描述】：我想让标题下方的导航栏导航在向下滚动时出现在屏幕顶部！ 向下滚动时，菜单不会立即出现。进一步向下滚动后出现！
还有人可以解释一下吗？ $(窗口).height() - 70;我不知道它会返回什么。
jquery 代码：
$(document).ready(function()
$(".nav").slideDown(800);
$(window).on('scroll',function()
var navHeight = $(window).height() - 70;
if ( $(window).scrollTop()> navHeight)
$('.nav').addClass('fixed');
$('.nav').css("display","none");
$('.nav').fadeIn("fast");
else
$('.nav').removeClass('fixed');
$('.nav').css("display","block");
);
);
我的html代码：
<div id="header">
<div id="header-container">
Logo goes here!!
</div>
</div>
<div class="nav">
<div class="nav-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Browse</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div class="main-body">
<div class="article-area">
<div class="article">
<h3>This is the title</h3>
<hr>
<img src="imgtest.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div class="clear"></div>
</div>
<div class="article">
<h3>This is the title</h3>
<hr>
<img src="imgtest.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<div class="clear"></div>
</div>
</div>
<div class="sidebar-area">
ertertre
</div>
<div class="clear"></div>
</div>
我的css代码：
body
margin: 0;
padding: 0;
background: #cccccc;
.clear
clear: both;
#header
background: #FF9900;
height: 160px;
width: 100%;
#header-container
width: 960px;
height: 160px;
margin: 0px auto 0px auto;
.nav
width: 100%;
height: 70px;
background: rgba(0,0,0,0.5);
display:none; /*hiding it for cool jquery slide down effect*/
.fixed
position: fixed;
top: 0;
height: 70px;
z-index: 1;
.nav .nav-container
width: 960px;
height: 62px;
margin: 0 auto;
.nav .nav-container ul
padding-top: 6px;
margin: 0 auto;
.nav .nav-container ul li
display: inline;
padding: 0px;
border-radius: 10px;
margin-right: 20px;
margin-left: 7px;
background: #000000;
.nav .nav-container ul li a
color: #FF9900;
text-decoration: none;
font-weight: bold;
font-size: 22px;
display: inline-block;
width:150px;
text-align: center;
height: 58px;
line-height: 250%;
background: black;
border-radius: 10px;
.nav .nav-container ul li a:hover
background:#FF9900;
color: white;
border-radius: 10px;
.main-body
width: 960px;
background: white;
margin:0 auto;
min-height: 700px;
.article-area
width: 600px;
min-height: 700px;
float: left;
margin: 20px;
margin-bottom: 0px;
.sidebar-area
width: 280px;
min-height: 400px;
background: green;
float: right;
margin: 20px;
.article
padding: 10px;
border: 1px solid white;
background: #FAFAF8;
box-shadow: 0.5px 0.5px 4px black;
margin-bottom: 20px;
border-radius: 5px;
.article p
width: 550px;
.article img
float: right;
overflow: auto;
margin-left: 10px;
.article h3
padding: 10px;
font-size: 26px;
padding: 3px;
margin:0px;
.upper-footer
width: 100%;
height: 250px;
background: black;
【问题讨论】：
【参考方案1】：一个歇斯底里版本的菜单修复：
$(document).ready(function()
$(".nav").slideDown(800);
// glueMenu use for hysteresis, jittery in transition.
// also, want outside callback for persistance.
var gluedMenu = false;
$(window).on('scroll',function()
// glue on when scroll past header container plus your fixed position in CSS
var navHeight1 = $('.header-container').height() + 70;
// unglue when scroll past returns back 10 pixels after fixed position
var navHeight2 = $('.header-container').height() + 60;
if ( $(window).scrollTop()> navHeight1 )
if (gluedMenu == false)
gluedMenu = true;
$('.nav').addClass('fixed');
$('.nav').css("display","none");
$('.nav').fadeIn("fast");
else if ( $(window).scrollTop() < navHeight2 )
if (gluedMenu == true)
gluedMenu = false;
$('.nav').removeClass('fixed');
$('.nav').css("display","block");
);
);
【讨论】：
感谢您的回复！但我想在导航完成后立即修复菜单。我希望效果是平滑的！在滚动完成之前向下滚动菜单变为固定。它也被固定在标题中！我想避免它！【参考方案2】：首先没有理由添加display: none。使用 fadeIn 就足够了。其次，每次滚动您都在执行该功能！这是不行的。相反，我们可以添加一些额外的逻辑来确保我们不会无休止地执行回调，但前提是 nav 元素的状态发生变化。另外，不用display: none/display: block，我们可以只使用fadeOut(0).fadeIn('fast')，因为动画队列在jquery中是同步的。最后，您错误地得到 window.height() 并从中减去任意值 70。相反，您应该测试滚动顶部与标题容器的高度，即 160 像素。在第二个条件if中，我们需要将header容器的高度加1，以确保在向上滚动时移除固定类。
$(document).ready(function()
$(".nav").slideDown(800);
$(window).on('scroll',function()
//var navHeight = $(window).height() - 70;
if ( $(window).scrollTop() > $('.header-container').height() && $('.nav:not(.fixed)').length )
$('.nav').addClass('fixed').fadeOut(0).fadeIn('fast');
else if( $(window).scrollTop() < $('.header-container') + 1 && $('.nav.fixed').length )
$('.nav').removeClass('fixed').fadeOut(0).fadeIn('fast');
);
);
fiddle
【讨论】：
它在 jsfiddle 中运行良好，但我的浏览器（即 chrome）导致我出错。我只复制了 你也可以解释一下你在if括号中写的内容。原谅我是菜鸟 您看到了什么错误？我相当确定该错误可能与您页面中的其他代码有关 @killerprince182 如果窗口滚动高度大于标题高度并且导航不固定存在做废话废话。否则，如果滚动高度小于标题高度并且导航固定存在，那么等等等等。这样可以确保您的事件只会在任一方向触发一次。 感谢您的帮助，但代码在向上滚动时不起作用！我已经在 operA 和 chrome 中尝试过！它在向下滚动时工作！以上是关于使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单？的主要内容，如果未能解决你的问题，请参考以下文章