jQuery 粘滞按钮

Question

我对 jQuery 滚动和粘滞按钮有疑问。

我有这个code

$window.scroll(function() {
  var $this = $(this);
  var scrollTop = $this.scrollTop();

  if ($buttonFilter.length > 0) {
    if (scrollTop + windowHeight > buttonFilterFullSize) {
      if ($buttonFilter.hasClass('fixed')) {
        $buttonFilter.removeClass('fixed');
      }
    } else {
      if (!$buttonFilter.hasClass('fixed')) {
        $buttonFilter.addClass('fixed');
      }
    }
  }
});

当所有 Collapse 都隐藏时效果很好，但是当我全部打开时，粘性按钮效果不佳并且在我使用滚动时不跟随。

我可以做些什么来改进我的代码？

Answer 1

您应该使用 $(document).height(); 来获取文档高度而不是窗口(浏览器窗口)的高度，并且您需要将它放在滚动事件中以在 Accordion 展开。

至于条件你需要加起来scrollTop和windowHeight。 scrollTop 为您提供 Y 坐标，windowHeight 为您提供窗口的高度，两者相加就是 documentHeight。

你的代码应该像下面这样:

 $window.scroll(function() {
     var $this = $(this);
     var scrollTop = $this.scrollTop();
     var documentHeight = $(document).height();
     var windowHeight = $(window).height();

     if ($buttonFilter.length > 0) {
       if ( (scrollTop + windowHeight) === documentHeight) {
         if ($buttonFilter.hasClass('fixed')) {
           //do something....
         }
       } else {
         if (!$buttonFilter.hasClass('fixed')) {
          //do something....
         }
       }

     }