jQuery 粘滞按钮

【问题标题】：jQuery sticky buttonjQuery 粘滞按钮
【发布时间】：2017-10-24 11:38:04
【问题描述】：

我对 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');
      }
    }
  }
});

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

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

【问题讨论】：

这是因为当您单击链接并打开折叠内容时，您的变量值应该会发生变化。例如，buttonFilterOffset（按钮顶部偏移）会在您打开文本时发生变化。您需要动态计算这些变量

标签： jquery html css twitter-bootstrap-3 scroll

【解决方案1】：

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

至于条件你需要加起来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....
         }
       }

     }

【讨论】：