我有一个固定位置的导航栏,该导航栏在设置的滚动点处逐渐消失。
现在,我需要在页面页脚(距离底部约400px)之前停止滚动。我知道这样做的方法是将位置从固定更改为绝对,但是我不确定如何通过jquery来实现?
Live Example on the jsFiddle
jQuery的:
var isVisible = false;
$(window).scroll(function(){
var shouldBeVisible = $(window).scrollTop()>1000;
if (shouldBeVisible && !isVisible) {
isVisible = true;
$('#floatingnav').fadeIn('slow');
} else if (isVisible && !shouldBeVisible) {
isVisible = false;
$('#floatingnav').fadeOut('fast');
}
});
CSS:
#floatingnav{
position: fixed;
top: 40px;
display: none;
}
最佳答案
检查导航的底部位置是否在页脚顶部位置之下。如果是这种情况,请设置一个类或特定的css-prop。
$(window).scroll(function(){
var windowTopPos = $(window).scrollTop();
var footerTopPos = $('#footer').offset().top;
var navBottomPos = $('#floatingnav').offset().top + $('#floatingnav').outerHeight();
if(navBottomPos >= footerTopPos) {
$('#floatingnav').css('position', 'absolute');
}
});