Wednesday, September 3, 2014

Sticky All SideBar

Paste the CSS code below before ]]></b:skin>

.column-right-inner { position: fixed; }



Paste this script before </body>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $(".column-right-inner").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $(".column-right-inner").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(".column-right-inner").stop().animate({ marginTop: 0 }); }; }); }); </script>


if you want the left sidebar that will be made sticky to change:
 column-right-inner -> column-left-inner

DEMO : all Right sidebar on this site use the code as above,
Please click the title of the other menus to see the effect

No comments:

Post a Comment