jQuery Fixed Header

by Milan Karagunović

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
	<li class="search">
      <input type="text" placeholder="search"/>
    </li>
  </ul>
</nav>

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet sem id ullamcorper convallis. Duis vel tellus molestie, lobortis tortor a, vestibulum enim. Nulla luctus dictum lobortis. Sed lacinia vitae erat sit amet rutrum. Donec non augue ante. Quisque sit amet sem non felis posuere semper. Donec dui odio, placerat non tincidunt eu, varius consectetur orci. Sed tincidunt sit amet diam vitae cursus. Nam faucibus mauris odio. Nam augue enim, tincidunt vel dignissim sed, rhoncus sit amet eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum, risus in rhoncus egestas, diam dolor varius neque, sed venenatis enim diam dapibus tellus.</p>

  <p>Maecenas viverra ut lorem vel blandit. Phasellus vestibulum nunc ut arcu fringilla tempus. In hac habitasse platea dictumst. Phasellus ornare consequat elementum. Duis neque erat, ornare malesuada odio vitae, elementum posuere nisi. Morbi ipsum justo, viverra ut neque in, sodales suscipit lorem. Sed ac turpis dui. Etiam in dui enim.</p>

  <p>Vestibulum at feugiat elit. Suspendisse mollis metus in turpis interdum viverra. Phasellus sed arcu nibh. Donec pharetra aliquet neque, eget ornare libero feugiat eu. Nam et lacinia tellus, a ultrices dolor. Nulla venenatis felis lorem, sit amet fermentum sapien suscipit vitae. Ut eu blandit neque, nec porttitor augue. Donec enim tortor, congue ac cursus nec, sagittis eget augue. Cras et elementum diam, in imperdiet mi. Aenean lobortis tellus et magna facilisis eleifend. Sed tempor nibh cursus mi pellentesque, quis vulputate dolor condimentum. In lobortis, turpis nec tempus ullamcorper, augue justo tincidunt odio, et pretium purus quam eget ipsum. Sed vel ligula tincidunt, vulputate...

CSS

body {
    padding: 0;
    margin: 0;
    height: 1200px;
    font-family: Verdana;
    font-size: 12px;
    letter-spacing: 1px;
}
nav {
    background: rgba(1, 1, 1, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    color: #fff;
    height: 70px;
    text-align: center;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
}
nav li {
    display: inline-block;   
}
nav li:nth-child(-n+3) {
    border-right: 1px solid #555;
}
nav li a {
    display: block;
    padding: 27px 15px 26px 15px;
    font-size: 14px;
    color: white;
    text-decoration: none;
    transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
}
nav li a:hover {
    color: grey;
}
.search {

}
.search input {
    background: rgba(255,255,255,0.5);
    width: 250px;
    height: 23px;
    margin-left: 150px;
    padding: 1px 0 2px 7px;
    font-size: 15px;
    color: #252525;
    border: none;
    outline: none;
    border-radius: 12px;
    transition: all 0.3s ease-in;
    box-shadow: inset 0 0 3px 0 #333;
    -moz-box-shadow: inset 0 0 3px 0 #333;
    -webkit-box-shadow: inset 0 0 3px 0 #333;
}
.search input:focus {
    background: rgba(255,255,255,0.8);
}
::-webkit-input-placeholder {
   color: #252525;
}
::-moz-placeholder {
   color: #252525;  
}
#content {
    width: 600px;
    padding-top: 70px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

$(function(){
  $(window).scroll(function(){
    if($('nav').offset().top === 0) {
       $('nav').stop().animate({ height: '70px' }, 300);
       $('nav li a').stop().animate({ padding: '27px 15px 26px 15px' }, 300, 'linear');
    }
    else {
       $('nav').stop().animate({ height: '50px' }, 300);
       $('nav li a').stop().animate({ padding: '17px 15px 16px 15px' }, 300, 'linear');
    }
  });
});