0

Please see my fiddle below:

https://jsfiddle.net/okiewardoyo/s23v891m/11/

.affix {
    top: 0;
}

To make the screen wider, scroll your screen.

What I want is, if I scroll, the sidebar become fixed when scrolling reach the bottom of header.

Then, when I scroll and reach the footer, the sidebar is not fixed and it follows the footer.

ketan
  • 19,129
  • 42
  • 60
  • 98
Okie Eko Wardoyo
  • 97
  • 1
  • 2
  • 11

1 Answers1

0

You will need to add an offset to the content class, and remove it again using jQuery.

Add the id 'content' to your content div. Then add the following jQuery script:

$('.sidebar').on('affix.bs.affix', function() {
    $('#content').addClass('col-sm-offset-3');
}).on('affix-top.bs.affix', function(){
    $('#content').removeClass('col-sm-offset-3');
});

You can test this here: https://jsfiddle.net/TimOgilvy/s23v891m/16/

Note I added a clearfix to the header.

Tim Ogilvy
  • 1,923
  • 1
  • 24
  • 36
  • What i want is like this fiddle, i have done some of them, look at https://jsfiddle.net/okiewardoyo/3m8oeLp5/ i want yellow sidebar not fix when it touched blue footer – Okie Eko Wardoyo Mar 29 '16 at 07:06