Really basic fixed sidebar

jQuery & CSS

by Cam Gould

HTML

<div id="page">
  
  <div id="main">
Pastry pudding candy canes marshmallow bonbon ice cream candy. Sugar plum pastry cupcake croissant gummies sesame snaps lemon drops chocolate bar sweet. Cake pie candy liquorice. Wafer chocolate bar caramels. Apple pie applicake powder. Oat cake cupcake applicake. Sesame snaps pastry lollipop apple pie cupcake candy canes candy canes. Gummi bears biscuit candy tart. Wafer lemon drops muffin applicake. Tiramisu fruitcake cake sesame snaps pie bear claw macaroon wafer. Toffee soufflé pudding halvah sweet dessert gingerbread jelly beans. Chocolate cake jujubes unerdwear.com tiramisu brownie dessert macaroon lemon drops. Marzipan lollipop soufflé gummi bears sugar plum ice cream soufflé chocolate cake topping. Sweet roll gummies jelly-o.
Unerdwear.com bonbon oat cake sesame snaps pie. Applicake carrot cake cheesecake pudding sweet cookie. Marshmallow cookie dragée muffin donut. Bear claw unerdwear.com powder dragée tootsie roll cake. Halvah chocolate cake donut cake icing donut dessert. Cotton candy sweet roll cupcake. Danish biscuit cake marshmallow jelly-o bonbon sugar plum halvah toffee. Carrot cake carrot cake macaroon icing tootsie roll danish donut. Tootsie roll candy canes wafer sweet roll jelly beans jelly-o. Biscuit lollipop powder croissant toffee. Marshmallow icing danish gummies pie powder soufflé marzipan lemon drops. Marshmallow wafer brownie cupcake. Soufflé cake sesame snaps. Gummies candy tootsie roll halvah biscuit wafer cookie topping.
Fruitcake brownie powder gummies tart. Macaroon jelly-o candy canes cheesecake topping topping soufflé icing cotton candy. Icing apple pie marzipan macaroon. Toffee jelly apple pie apple pie chupa chups danish jelly. Danish candy canes lollipop sweet cheesecake tiramisu liquorice oat cake muffin. Muffin toffee muffin cake macaroon macaroon. Lollipop chocolate cake cookie danish lollipop topping lemon drops apple pie. Gummi bears marzipan cupcake candy canes. Soufflé fruitcake...

CSS

#page {
    position:relative;
}
#main {
    width:70%;
    float:left;
}
#sidebar {
    width:20%;
    position:absolute;
    top:0;
    right:0;
}
#sidebar.fixed {
    position: fixed;
    top:0;
}

JavaScript

$(document).ready(function () { 
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        //if y > top, it means that if we scroll down any more, parts of our element will be outside the viewport
        //so we move the element down so that it remains in view.
        if (y >= top) {
           var difference = y - top;
           $('#sidebar').css("top",difference);
       }
   });
});