How do i get a fixed sidebar like the one containing 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 to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.
Currently I am just using:
#sidebar { position:fixed; }
But this does not give it an absolute position when reaching the top of the page.
Thank you
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">
is the example of content.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With