Featured post

Add active class dynamically in menu and submenu

on
0

Bootstrap's Affix and ScrollSpy plugins

on
For Example : http://codepen.io/anon/pen/jmmKZP

Important step:

1) Body tag:

<body data-spy="scroll" data-target=".scrollspy">

2) Add class scrollspy and data-spy="affix":(Add this to that div you want to fix)

<div class="col-md-3 scrollspy">
  <ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
  </ul
 </div>
 
3)JS:
For top Affix:
<script type="text/javascript">
  $('.action-list ').affix({
   offset: {
      top: $('.action-list').offset().top
   }
 });
</script> 
For Bottom Affix:
 
<script type="text/javascript">
  $('.action-list ').affix({
   offset: {
      bottom: ($('footer').outerHeight(true)) + 40
   }
 });
</script>
 
note: you can use both js in one time.
 ex:
<script type="text/javascript"> 
$('.action-list').affix({
          offset: {     
            top: $('.action-list').offset().top,
            bottom: ($('footer').outerHeight(true)) + 40
          }
      }); 
</script>
 
4)CSS:
 
For Top: 
.affix {
  top:20px; //height from top
  width: 213px;
}
For Bottom:
.affix-bottom {
  position: absolute;
  width: 213px;
} 


Full Guidence: Click Here
[This is not for speedy designer]

Comments

Post a Comment