Fix object to top of browser window when scrolling

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.

Answers


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/


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).


If browser supports "position:fixed" next plain javascript example is more fast:

<html>
<head>
<style>
html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}
</style>
<script type="text/javascript">

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
    document.getElementById("navbar").className="navbar_absolute";
  }
}

</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>

Use:

#element {
  position: fixed;
  right: 200px;
  top: 200px;
}

"fixed" means the element is positioned relative to the browser window.


By setting the div's position to position:fixed


You can do it something like this :

Example

css

body {
    height: 3000px;
    top: 0;

}
#image {
    width: 100%;
    background: #444;
    height: 50px;
}
#scroller{
    height:100px;
    background:#ccc;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}

script

$(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#scroller').addClass('stuck');
                } else {
                    $('#scroller').removeClass('stuck');
                }

            });

after scroll 50 px it will change the css of scroller.

this may be a good start


Rather then defining the scroll lenght, why can't we define the object's position? say once it reaches top:0 then trigger the script. This way it will be more device friendly.


Need Your Help

MVC3 unobtrusive validation group of inputs

asp.net-mvc asp.net-mvc-3

I need to validate 3 or more input fields (required at lest one). For example I have Email, Fax, Phone.

unwanted leading blank space on oracle number format

sql oracle

I need to pad numbers with leading zeros (total 8 digits) for display. I'm using oracle.