Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-git1.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="header">
      <img src="http://placehold.it/960x300" />
    </div>
    <div id="nav">
      <img src="http://placehold.it/960x80/000000" />
    </div>
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>      
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </body>
</html>
 
$(function () {
  var $nav = $('#nav'), 
      $header = $('#header'),
      $window = $(window),
      height = $nav.height(),
      top = $nav.offset().top;
  var nav = function () {  
    var scroll = $window.scrollTop(); 
    if (top < scroll) {
      $nav.css({ 'position': 'fixed', 'top': 0});
      //10 is the margin of the ol element
      $header.css({ 'margin-bottom': height + 10 });
    } else {
      $nav.css({ 'position': 'relative' });
      $header.css({ 'margin-bottom': 0 });
    }
  };
  
  nav();
  $(window).scroll(nav);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rafaelcastrocoutopro
0viewers