Fixed Scroll Position

Fixed Scroll Position

by 8ogdan

HTML

<h1>sticker demo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor eros,  nec rhoncus nulla. In fringilla, dui vel vehicula luctus, nunc arcu ultricies nisi,  eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc interdum,  dolor sed euismod rutrum, odio turpis rutrum odio, iaculis venenatis nunc sem eu  dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus nunc, in fermentum  arcu odio non ipsum. Vivamus bibendum pulvinar sapien a cursus. Nullam lobortis  nibh eget odio placerat hendrerit. In non leo turpis, quis posuere augue. Mauris  auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus lectus, rhoncus  ut malesuada eget, auctor ac ligula. Suspendisse mollis tempus interdum. Proin non  velit in lectus elementum interdum eu eget velit. Class aptent taciti sociosqu ad  litora torquent per conubia nostra, per inceptos himenaeos. Nam lobortis, est ac  elementum tincidunt, lacus dolor lacinia erat, eget ullamcorper augue justo in lectus.  Aliquam eros felis, fringilla sed cursus sit amet, consectetur nec tellus. Vestibulum  ultricies auctor erat, ac facilisis felis fermentum id. </p> <div id="mainbar">     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tortor      eros, nec rhoncus nulla. In fringilla, dui vel vehicula luctus, nunc arcu ultricies      nisi, eu adipiscing sapien orci nec justo. Nulla facilisis gravida tempus. Nunc      interdum, dolor sed euismod rutrum, odio turpis rutrum odio, iaculis venenatis      nunc sem eu dui. Nulla venenatis, leo quis porta luctus, ipsum ipsum tempus      nunc, in fermentum arcu odio non ipsum. Vivamus bibendum pulvinar sapien a cursus.      Nullam lobortis nibh eget odio placerat hendrerit. In non leo turpis, quis posuere      augue. Mauris auctor commodo quam, quis vulputate orci tincidunt et. Nulla tellus      lectus, rhoncus ut malesuada eget, auctor ac ligula. Suspendisse mollis tempus      interdum. Proin non velit in...

CSS

body {
    width: 960px;
}
#mainbar {
    width: 660px;
    float: left;
}
#sidebar {
    width: 270px;
    float: right;
}
#sticker {
    width: 200px;
    padding: 10px;
    margin-top:25px;
    background: #eee;
    border: 1px solid #ccc;
}

JavaScript

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});