javascript - 滚动时修复侧边栏，直到到达页脚(使用 Bootstrap 类)

Question

我正在尝试制作一个随页面滚动的侧边栏，当它的底部到达页脚时，它将停止滚动并留在原地。就像解释一样here ，并喜欢这个 fiddle .

问题是，我正在使用一些 Bootstrap 3，我相信由于其 CSS 上的某些属性，我无法获得相同的结果。侧边栏不再停留在底部，而是在到达页脚后返回。

这是我的布局结构。

<nav class="navbar"></nav>

<div class="container" id="wrapper">
  <div class="row">
     <div class="col-sm-8" id="blog-main"></div>
     <div class="col-sm-4" id="blog-sidebar"></div>
  </div>
</div>

<div id='blog-footer'></div>

fiddle :https://jsfiddle.net/mpxrqwwf/7/

我尝试将 blog-sidebar 放在包装器 div 中，在其上使用 position: absolute 并在主包装器上使用 position: relative ，但它破坏了布局，滚动仍然没有像我预期的那样工作。预先感谢您的帮助。

Answer 1

Bootstrap 有一个内置插件可以为您做到这一点，只需添加几个数据属性即可。

Affix affix.js

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;.

您只需通过要附加的元素上的属性定义一个offset-top 和一个offset-bottom。根据您的偏移值，当滚动期间达到偏移量时，插件将添加和删除几个 CSS 类。这些类可以根据您的需要设置样式。

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions

如果您想要更多的灵 active ，您可以通过 javaScript 调用词缀插件。

这是您的 fiddle通过数据属性使用词缀插件:

CSS

/** CSS relacionado à barra de navegação **/
#my-nav {
  position: fixed;
  width: 100%;
  background-color: black;
  height: 40px !important;
  min-height: 0px;
  z-index: 9999;
  margin-bottom: 0;
}

#wrapper {
  width: 81.6%;
}

#blog-header {
  color: black;
  text-align: right;
  margin-bottom: 20px;
}

#blog-main {
  /*width: 68%;*/
  height: 500px;
  padding: 0;
  margin-right: 5px;
  background-color: orange;
}

#blog-sidebar {
  background-color: purple;
  /*width: 30.9%;*/
  width: 222px;
  height: 300px;
  padding: 25px 0px 20px 0px;
}

.affix {
  position: fixed;
  top: 40px;
}
.affix-top {
  position: static;
}
.affix-bottom {
  position: absolute;
}

#blog-footer {
  background-color: green;
  height: 300px;
}

HTML

<nav class="navbar" id="my-nav"></nav>

<br /><br />

<div class="container" id="wrapper">
  <div id="blog-header">
    <h1>header</h1>
  </div>
  <div class="row">
    <div class="col-sm-8">
      <div id="blog-main"></div>
    </div>
    <div class="col-sm-4">
      <div id="blog-sidebar" data-spy="affix" data-offset-top="80" data-offset-bottom="345"></div>
    </div>
  </div>
</div><!-- /.container -->
<div id='blog-footer'></div>