最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Fix a sidebar while scrolling until footer is reached (using Bootstrap classes) - Stack Overflow

programmeradmin2浏览0评论

I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.

The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.

This is my layout structure.

<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: /

I tried putting blog-sidebar inside a wrapper div, with position: absolute on it and with position: relative on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.

I'm trying to make a sidebar that will scroll with the page, and when its bottom reaches the page footer, it will stop scrolling and stay in place. Like it is explained here, and like in this fiddle.

The problem is, I'm using some Bootstrap 3, and I believe I can't achieve the same result because of some properties on its CSS. Instead of the sidebar staying at the bottom, it goes back up after it reaches the footer.

This is my layout structure.

<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/mpxrqwwf/7/

I tried putting blog-sidebar inside a wrapper div, with position: absolute on it and with position: relative on the main wrapper, but it broke the layout and the scrolling still did not work as I expected. Thanks in advance for the help.

Share Improve this question asked Jan 10, 2016 at 22:06 GusGus 16k7 gold badges27 silver badges29 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

Bootstrap has a build in plugin to do that for you, just by adding a couple of data attributes.

Affix affix.js

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

You just have to define an offset-top and an offset-bottom via the attributes on the element you want to be affixed. Based on your offset values the plugin will add and remove a couple of CSS classes when an offset is reached during scrolling. These classes can be styled to your needs.

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

If you want more flexibility you can call the affix plugin via javaScript.

Here is your fiddle using the affix plugin via data attributes:

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>
发布评论

评论列表(0)

  1. 暂无评论