Question

65

Fix a sidebar while scrolling until footer is reached (using Bootstrap classes)

rated 0 times [ 70] [ 5] / answers: 1 / hits: 15823 / 9 Years ago, sun, january 10, 2016, 12:00:00

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.net/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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arlethjeanettep

Add To Favorites

Follow

Total Points: 506

Total Questions: 96

Total Answers: 79

Location: Liberia

Member since Tue, Mar 14, 2023

1 Year ago

arlethjeanettep questions

1 How to mock a constructor instantiated class instance using jest?

Tue, May 17, 22, 00:00, 2 Years ago

1 How to bypass human verification 'press and hold' using Selenium in Python?

Sun, Aug 1, 21, 00:00, 3 Years ago

1 How to make drag to scroll work smoothly with scroll snapping

Sun, Jun 13, 21, 00:00, 3 Years ago

1 Rate limit the number of request made from react client to API

Fri, Jan 22, 21, 00:00, 3 Years ago

1 How to test if React component is returning null or its children using React Testing Library?

Wed, Jul 15, 20, 00:00, 4 Years ago

View All

answered 9 Years ago justynkaina · Accepted Answer

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>