Question

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

视图如下

.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
});

我知道引导程序附带内置的附加功能，但如果可能的话，我很想继续使用路标。任何关于如何阻止重叠的建议都将非常感激：）

Answer 1

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

这表示当页脚顶部[导航栏的高度]远离窗口顶部时（这意味着导航栏的底部触及页脚顶部），请删除粘性类并添加此{ {1}}课程。现在，您需要为at-bottom课程设置样式，使其保持原状。

Answer 2

我使用这个jQuery代码来防止我的粘性内容进入页脚。我使用了顶部问题的确切代码。使用此代码与航点粘性减去页脚高度。我的碰巧是400px。此代码用于呈现所有共享相同页脚的不同大小的页面。

include

我在div上没有背景色。我打电话给我的css。有一个透明的div确保背景颜色不会与页脚重叠。我还调整了偏移到.waypoint＆＃39; sticky＆＃39;被抵消：＆＃39; 13％＆＃39;为了我的特殊需要。

停止粘贴侧边栏与页脚航点重叠

2 个答案: