The position of the side panel "semi" fixed css

Question

How to get a fixed sidebar, such as the one that contains the social buttons on this site:

http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html

I want my sidebar to be fixed at the top of the screen when I scroll down, but there should be an absolute position at the top of the page so that it stops following the browser like I scrool.

I am currently just using:

#sidebar { position:fixed; } 

But this does not give him an absolute position when reaching the top of the page.

thanks

Answer 1

HTML

 <div class="wrapper"><div class="abs" id="sidebar"></div></div> 

CSS

 .abs { position: absolute; } .fixed { position: fixed; top: 30px !important;} #sidebar { top: 150px; left: 0; height: 100px; width: 20px; background-color: #ccc;} .wrapper { height: 1500px; padding: 20px;} 

JQuery

  $(document).scroll(function() { var scrollPosition = $(document).scrollTop(); var scrollReference = 10; if (scrollPosition >= scrollReference) { $("#sidebar").addClass('fixed'); } else { $("#sidebar").removeClass('fixed'); $("#sidebar").addClass('abs'); }; }); 

DEMO of this code:

http://jsfiddle.net/B3jZ5/6/

 <div class="wrapper"> 

- sample content.

Answer 2

You can also try this plugin:

https://code.google.com/p/sticky-panel/