我使用以下代码使窗口向下滚动时菜单粘滞。如果窗口高度足以向下滚动整个标题区域,它可以正常工作,但它产生的问题是高度刚好足够接近滚动,在这种情况下,它开始闪烁并且不允许滚动。
这是问题的演示,刷新几次并尝试向下滚动。我已将机身高度设置为 622px 以重现该问题:
http://jsbin.com/ipEROYO/1
这是我正在尝试的代码:
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
.CSS:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
这是因为当您将导航div
设置为position:fixed
时,您正在缩短文档的长度(按该div的高度),这会导致滚动条消失,这会导致scrollTop()
值0
,从而导致.nav
div position:static
,如果您继续向下滚动,这是一个无休止的循环。
这是我的快速解决方案:
$(document).ready(function() {
var height = $('.nav').outerHeight();
$(window).scroll(function() {
if($(this).scrollTop() > height)
{
$('.nav').css('position','fixed');
$('body').css('padding-bottom',height+'px');
}
else if($(this).scrollTop() <= height)
{
$('.nav').css('position','static');
$('body').css('padding-bottom','0');
}
});
$(window).scroll();
});
刚刚修改了JSbin。看看吧。你真的很接近,只是做了比你需要做的更多,比如在页面加载时设置粘性类,而不是在函数首次运行时。让我知道这是否有帮助。
试试
$(window).scroll(function () {
var scroll_top = $(this).scrollTop();
if (scroll_top > 66) {//height of header
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});
强烈建议使用此布局的纯 CSS 解决方案。 似乎没有人知道该怎么称呼这种方法,所以我一直将其称为绝对拉伸技术,但根据我的经验,它在移动设备和 PC 上都能很好地工作,包括除 IE6 及更低版本以外的所有主要浏览器。 这里有一些关于它的讨论。
body, .header, .nav, .mainContent{
position: absolute;
top: 0;
left: 0;
right: 0;
}
body, .mainContent {
bottom: 0;
}
.header{
height: 120px;
}
.nav{
height: 70px;
top: 120px;
}
.mainContent{
top: 190px;
overflow: auto;
}
您会发现通过这种方式可以获得非常强大、简洁、组织良好的布局,并且固定的页眉、页脚和侧边栏很容易随之而来。