请查看此JPG以供参考:
我的导航栏显示在页面顶部。我正在寻找的行为是:当您向上滚动时,相同的导航栏会淡入并固定在屏幕顶部。
我在这里使用的代码有效,但我不确定如何设置一个规则,一旦你向上滚动到默认位置,就会阻止导航器粘到屏幕顶部。目前,使用下面的代码,即使您向上滚动到页面顶部,导航仍会固定在顶部。
function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
$('#header').fadeOut();
} else {
$('#header').fadeIn();
$('#header').addClass('fixed');
}
previousScroll = currentScroll;
});
我的CSS是:
.fixed {
position: fixed;
top: 0;
}
答案 0 :(得分:3)
您必须声明一个记录#header
元素原始垂直偏移量的附加变量。当滚动事件触发时,此值将发生变化(因为固定位置会将偏移重置为0),我们将其声明为滚动事件上方一级:
$(document).ready(function() {
var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header').fadeOut();
} else {
$('#header').fadeIn();
$('#header').addClass('fixed');
}
} else {
$('#header').removeClass('fixed');
}
previousScroll = currentScroll;
});
});
请参阅此处的概念验证 - http://jsfiddle.net/teddyrised/6zGx6/
答案 1 :(得分:0)
试试这个。您可能还需要更改#header
width
,具体取决于您的结构
var hdr = $('#header');
var off = {top: 150} //hdr.offset();
$(window).scroll(function(){
if($(this).scrollTop() >= off.top)
hdr.fadeIn('fast').css({position :'fixed', top: 0, left: 0});
else
hdr.fadeOut('fast')
})