jquery - 停止粘性侧边栏与页脚航点重叠

Question

我有一个应用程序，它有一个带有多个链接的侧面导航栏。我正在使用 JQuery Waypoints 来确保当用户向下滚动页面时侧面导航是固定的。除了链接与页面底部的页脚重叠之外，它运行良好。

View 如下

.container
  .row
    .col-sm-3
      .side-navbar
        .nav
          %li
            %a{href: '#overview'}
              Overview
          %li
            %a{href: '#specification'}
          ...
    .col-sm-9
      #overview
        ... Content ...
      #specification
        ... Content ...

#footer
  ... content ....

然后我的 JS 中有以下内容:

$('.side-navbar').waypoint('sticky', {
  offset: 0
});

我知道 bootstrap 带有内置的 Affix，但如果可能的话，我热衷于继续使用路径点。任何有关如何停止重叠的建议将不胜感激:)

Answer 1

$('#footer').waypoint(function(direction) {
  $('.side-navbar')
    .toggleClass('sticky', direction === 'up')
    .toggleClass('at-bottom', direction === 'down')
}, {
  offset: function() {
    return $('.side-navbar').outerHeight()
  }
})

这表示当页脚的顶部距离窗口顶部[导航栏的高度](这意味着导航栏的底部接触页脚的顶部)时，删除粘性类并添加此 底部类。现在，您可以设置 at-bottom 类的样式，使其停留在需要停留的位置。