Float div position to top when you scroll

In the below code I have explained about Maintaining div tag at top of the screen when scrolling..

IF my current position is greater or equal to the “sticker” position, give the sticker div a class of “stick”.  This changes the CSS of the div to have a FIXED position as long as the viewport is lower than the position of the sticker.

HTML - Take a div tag which contain the data which you want to float.

<div id="sticker">
    ...start scrolling..
   //Add your Code block here...
</div>

CSS 
Styles applied to div#sticker and the class “.stick
"stick" class is most important, which maintain position when you scroll.

div#sticker {
    padding:20px;
    margin:20px 0;
    background:#AAA;
    width:190px;
}
.stick {
    position:fixed;
    top:0px;

}


jQuery – Calculates the position of the sticker div and makes its position fixed if the page has scrolled that far

$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }

    });