Sticky Nav

by Taufik Nurrohman

HTML

<section>
    <article></article>
    <aside>Sidebar</aside>
</section>

CSS

section {
  width:80%;
  margin:0px auto;
}

article {
  width:66%;
  height:10000px;
  background-color:#eee2e2;
  border-right:4px dashed #cec2c2;
  float:left;
}

aside {
  position:relative;
  top:200px;
  width:30%;
  height:200px;
  float:right;
  background-color:black;
  color:white;
}

JavaScript

var win = $(window),
    sidebar = $('aside'),
    originalTop = sidebar.css('top'),
    sidebarOffsetTop = sidebar.offset().top;
win.scroll(function() {
    var scrollTop = $(this).scrollTop();
    if (scrollTop > sidebarOffsetTop) {
        sidebar.css('top', scrollTop);
        sidebar.html('Top: ' + scrollTop + ' piksel'); // Untuk demonstrasi
    } else {
        sidebar.css('top', originalTop);
        sidebar.html('Top: ' + originalTop); // Untuk demonstrasi
    }
});