Fix object to top of browser window when scrolling

Question

I saw recently a new interesting feature in the new gmail and also in the HTML5 bing preview that fixes a navigation bar to the top of the browser window when scrolling. The bar may start 100px down the page but when you scroll and it reaches the top of the browser window, it fixes there until you scroll back up above where it was originally positioned.

My question is; how can I do this effect or do something similar to this effect?

I hope you can understand my question and what I'm trying to describe.

Answer 1

If you want the element to start further down on the page, then stay fixed on the top as you scroll down, this may be a good start:

http://jsfiddle.net/cc48t/

Answer 2

I know this post it's a bit old, but still very usefull.. i just wanted to add a jquery version (a little bit cleaner and configurable), but it's a modified version of the Andrew D. answer.

In this case i don't have two classes, instead i have an relative positioned div and when i reach a certain point (max_scroll) i add a class to the object, and that class is what makes it float

Below is the javascript (all done inside de document ready function)

<script type="text/javascript"> var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way $(document).ready(function(){          $(window).scroll(function () {         var navbar = $(".filterbutton");          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;         if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {                 navbar.addClass("filterbuttonFixed");                 // console.log("go floated");         }         else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {                 // console.log("return to normal");                 navbar.removeClass("filterbuttonFixed");         }  } });  </script> 

and this is my nav-bar container div

<div id="floatable-nav-bar" class="my-relative-position-class">     <nav class="page-menu">         <ul class="scroll-nav">             <li><a class="selected" href="#first">Section 1</a></li>             <li><a class="" href="#second">Section 2</a></li>             <li><a class="" href="#third">Section 3</a></li>             <li><a class="" href="#fourth">Section 4</a></li>         </ul>     </nav> </div> 

and last but not least, my nav-floated style

#floatable-nav-bar.nav_floated {     position:fixed;     top:1px;     left: 0;     width:100%;     text-align: center;     background: #EEE;     padding: 5px 0; } 

I know this isn't the simplest example, but for jQuery users maybe this is a simpler approach, and i think it's better to just add and remove one class (at least it was for me).