Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Demo by roXon </title>
</head>
<body>
  
  
 <div id="header">
   
   <h1>Company logo</h1>
   
   <div id="navigation">
     <ul id="nav">
       <li id="mini-logo"><a href="#">LOGO</a></li>
       <li><a href="#">PRODUCT</a></li>
       <li><a href="#">RESOURCES</a></li>
       <li><a href="#">CUSTOMERS</a></li>
       <li><a href="#">SUPPORT</a></li>
       <li><a href="#">COMPANY</a></li>
     </ul>
   </div>
   
   
  </div>
  
  
  <div id="page">
    <h2>Page content</h2>
    <p>
      
​
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt nunc ac ante mollis sagittis. Sed molestie velit eget libero cursus pharetra. Etiam luctus euismod sem, a luctus sapien sagittis vitae. Fusce faucibus erat sit amet libero rhoncus non fringilla orci fermentum. Fusce sed justo vel quam mollis posuere nec ac tortor. Integer fringilla libero quis arcu tristique eu tempus diam iaculis. Phasellus est risus, viverra a blandit sit amet, mattis eget felis.
​
In tincidunt accumsan tempor. Mauris non sem non diam hendrerit rutrum. Praesent non consectetur elit. Proin scelerisque malesuada sem, at ultrices risus aliquam id. Donec elementum lacus porta nulla fermentum at imperdiet neque varius. Praesent imperdiet viverra tortor, at pharetra neque convallis id. Proin dolor ante, vestibulum sed porta eget, suscipit nec enim. Duis rhoncus dolor eu sem scelerisque id rhoncus neque viverra. Fusce at ultricies lacus. Aliquam quam purus, dictum viverra luctus vitae, varius vel neque. Integer porta lectus sit amet diam molestie non vehicula magna convallis. Phasellus vitae sapien in nulla pharetra pellentesque.
​
Nulla facilisi. Maecenas mollis accumsan nunc nec varius. Quisque gravida lacus ut ipsum lacinia ac tincidunt velit egestas. Integer facilisis facilisis convallis. Vivamus scelerisque vestibulum arcu eget porta. Mauris nec purus elit. Vestibulum iaculis venenatis venenatis. Phasellus ullamcorper, ligula ac scelerisque pretium, risus ante consectetur augue, a blandit sapien nunc eget dui.
​
Praesent odio lectus, tristique id aliquam fermentum, elementum vel ante. Phasellus semper augue quis arcu suscipit vitae porta magna consectetur. Etiam mollis arcu eu mi sodales dictum. Donec sit amet volutpat eros. Cras enim tellus, volutpat at faucibus vel, eleifend ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent facilisis elit sit amet nisi faucibus auctor.
​
Ut vehicula posuere arcu, quis fermentum augue tincidunt scelerisque. Duis arcu ligula, ornare id ullamcorper at, feugiat ut lectus. Praesent imperdiet tristique ante, eget placerat turpis dictum quis. Etiam justo libero, pretium eu imperdiet sit amet, elementum a erat. Aenean mollis cursus convallis. Duis neque dolor, dapibus posuere cursus non, lacinia quis lorem. Aliquam egestas, ipsum nec pretium vulputate, diam enim euismod velit, in dapibus quam purus eu augue. Aliquam odio velit, cursus vitae vulputate id, pulvinar quis sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem quis mi porttitor iaculis nec vel est. Vestibulum id nisl augue, id ultricies dui. Aliquam a ultrices leo. Integer at placerat turpis. Nam nibh neque, tincidunt id vestibulum eu, luctus vitae lorem. In in erat ante, at posuere diam. 
    </p>
  </div>
  
  
  
  
  
</body>
</html>
​
 
*{margin:0;padding:0;}
body{font-family: Open sans, Arial, sans-serif}
​
​
#header{
  background:#eee;
}
​
#header h1{
  padding:20px;
}
​
#navigation{
  height:40px;
}
#nav{
  position:relative;
  top:0;
  width:100%;
  list-style:none;
  background:#76A000;
  height:40px;
}
​
#nav li{  
  float:left;  
}
#nav a{
 text-decoration:none;
  display:block;
  padding:10px 10px;
  color:#fff;
}
​
#nav li#mini-logo{
  display:none;
  font-weight:bold;
}
​
​
#page{
  padding:30px 20px;
  height:3000px;
  width:500px;
}
 
var navPos = $('#nav').offset().top;
​
$(window).scroll(function(){
​
  var fixIT = $(this).scrollTop() >= navPos;
  var setPos = fixIT ? 'fixed' : 'relative' ;
  var logoSH = fixIT ? 'show' : 'hide' ;
 
  $('#nav').css({position: setPos});
  $('#mini-logo')[logoSH](300);
​
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers