Sticky nav on scroll

Original code taken from http://codepen.io/senff/pen/ayGvD

by Cam Gould

HTML

<header>This is a header</header>

<nav>This is the nav</nav>

<main>
    <h2>This is the main area</h2>
    <p>Bonbon danish tart cake candy. Pudding sweet chocolate tiramisu. Cotton candy icing bear claw jelly-o bonbon soufflé pudding cake chocolate. Brownie bonbon marzipan lollipop apple pie gummi bears cake carrot cake. Sweet roll donut macaroon sesame snaps powder. Croissant soufflé fruitcake. Candy canes cookie pastry. Gummies jelly chocolate cake. Croissant carrot cake cheesecake danish pastry jelly-o gummi bears toffee biscuit. Chocolate bar sesame snaps dragée candy toffee chocolate cake croissant. Caramels dessert halvah oat cake jelly applicake icing dessert. Carrot cake pastry jelly beans fruitcake liquorice. Applicake oat cake powder chocolate.</p>
    <p>Cake applicake applicake croissant chocolate dragée. Brownie bear claw sugar plum candy canes candy canes danish. Chocolate bar tart sesame snaps muffin chupa chups cupcake. Cupcake jelly apple pie jelly beans cupcake donut wafer. Carrot cake pudding chupa chups unerdwear.com jujubes pastry tootsie roll. Brownie sugar plum cake cheesecake apple pie chocolate cake topping ice cream croissant. Marzipan soufflé jujubes muffin marzipan macaroon dragée liquorice sesame snaps. Ice cream dragée soufflé marshmallow. Toffee ice cream gummi bears sesame snaps sugar plum sugar plum caramels. Lollipop icing jelly. Marzipan topping dessert jujubes biscuit unerdwear.com gummies macaroon gingerbread. Soufflé danish lollipop bear claw lollipop sugar plum. Dragée sweet chocolate bar. Sweet cookie marshmallow.</p>
    <p>Powder chocolate brownie. Sugar plum gingerbread fruitcake. Chocolate cake macaroon applicake sugar plum. Cookie sweet roll icing. Dessert tiramisu apple pie sugar plum jelly beans. Candy canes biscuit candy canes chocolate bar. Cheesecake lollipop sweet carrot cake. Tootsie roll fruitcake brownie. Marzipan tart bear claw lemon drops marzipan apple pie halvah bonbon. Lollipop powder sugar plum...

CSS

header {
    height:100px;
    background:#f9f9f9;
}
nav { 
    height:50px;
    width:100%;
    background:#999;
    color:#fff;
}

main { 
    height:1000px;
}

JavaScript

// Create a clone of the menu, right next to original.
$('nav').addClass('original').clone().insertAfter('nav').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');

    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}