Bootstrap: Stop affix when reaching end of certain div

Question

I have a sidebar thats sticks when you scroll. Now I want it to stop (and be fixed) when reaching a certain div.

For illustration. What happends: http://postimg.org/image/l1n0djb0n/

What I want: http://postimg.org/image/5evr05x8n/

I needs to stop floating (on scroll) when reaching the bottom of the last content.

How can I do this?

CSS:

#sidebar.affix-top {
position: static;
margin-top:0px; 
}

#sidebar.affix {
position: fixed;
top:49px;
}

HTML:

 <div id="sidebar" class="sidebar_package">
 info for sidebar

 <div class="hiddenpackage_c2a">
     more content
 </div>

 </div>

JS:

//Side menu floater
$('#sidebar').affix({
      offset: {
        //top: $('header').height()
        top:185
      }
});

Unnecessarily

Bumping this question – Gyve

Answer 1

You can use the bottom offset

$('#sidebar').affix({
    offset: {
       top: 180,
       bottom: $('#bottom-div').outerHeight(true)
   }
});

And add the following css

.affix-bottom { 
    position: absolute; 
}

Chalmer