在某个点停止固定元素滚动

Stop fixed element scrolling at certain point?

本文关键字：元素 滚动      更新时间：2023-09-26

我有一个固定位置的导航，在设定的滚动点淡入。

我现在需要停止它在页面页脚之前滚动（距离底部约 400 像素）。我知道这样做的方法是将位置从固定更改为绝对，但我不确定如何通过 jquery 实现它？

jsFiddle 上的实时示例

j查询：

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');
  }
});
相关文章：