Bootstrap Affix The Easy Way (v3.*) (fuck Bs Docs)

- better use https://github.com/yuku-t/jquery-scrollchaser instead

1- html

<div class="col-xs-12 col-md-4">
  <div class="sticky">
    ...
  </div>
</div>

<div class="col-xs-12 col-md-8">
  ...
</div>

2- js

function sidebar() {
  $('.sticky').width($('.sticky').parent().width());

  $('.sticky').affix({
    offset: {
      top: $('#menu').outerHeight(true) // the menu bar area
           + $('.hero').height(), // incase u have anything else beside the menu to add b4 the affixed area
      bottom: $('.footer').outerHeight(true)
    }
  });
  $('.sticky').affix('checkPosition');
}

$(document).ready(function() {
  sidebar();
});
$(window).resize(function() {
  sidebar();
});
$(window).load(function() {
  sidebar();
});

3- css

.affix {
    position: fixed !important;
    top: 15px; // i made it equal to the padding-top of the item
}
.affix-bottom {
    position: fixed !important;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s