Question

当用户到达内容的底部而不是顶部时，尝试调整我的代码。目前工作正常，但从顶部。

<script>
 $(function(){
 var shrinkHeader = 150;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('.button').addClass('shrink');
       $('.brand').addClass('shrink');
    }
    else {
        $('.button').removeClass('shrink');
        $('.brand').removeClass('shrink');
    }
  });

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
}
});
</script>

我希望它能像它一样运行，但是当用户从底部到达150px时，而不是从顶部到达

Answer 1

使用：

$(document).scrollTop();

获取/检测jquery中从顶部滚动的距离。

如果你想从底部 GET 距离。

我建议使用：

// Returns height of browser viewport
$( window ).height();

// Returns height of HTML document
$( document ).height();

获得距离：

distance = parseInt($(document).height()) - parseInt(getCurrentScroll());

Test code here

您的 $（窗口）.scroll（function（）{...}）; 是正确的！

您只需要更新函数 getCurrentScroll（）

//use:
return $(document).scrollTop();

//instead of:    
return window.pageYOffset || document.documentElement.scrollTop;

然后选择 $（窗口）.height（）或 $（文档）.height（）：

 distance = parseInt($(document).height()) - parseInt(getCurrentScroll());     
 if ( distance >= shrinkHeader ) {
    // do the adding or removing of class ....
 }

根据您想要的结果，检查距离调整。

滚动到底部时更改代码

1 个答案: