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 positione开发者_如何转开发d.

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.

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.

CSS and vanilla JavaScript solution(without jquery):

CSS: for fixed top positioning.

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

Javascript: Dynamically adding/removing the CSS class(.sticky) with respect to the user scroll position.

const g_fixedNavbar = document.getElementById("fixed-navbar-Id");

// Sticky Nav bar
window.onscroll = function () {
    if (window.pageYOffset > g_fixedNavbar.offsetTop) {
        g_fixedNavbar.classList.add("sticky");
    } else {
        g_fixedNavbar.classList.remove("sticky");
    }
};

Sample Working Code below :

const g_fixedNavbar = document.getElementById("fixed-navbar-Id");

    // Sticky Nav bar
    window.onscroll = function () {
        if (window.pageYOffset > g_fixedNavbar.offsetTop) {
            g_fixedNavbar.classList.add("sticky");
        } else {
            g_fixedNavbar.classList.remove("sticky");
        }
    };

    /* Must */
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }

    /* Cosmetic */
    #fixed-navbar-Id {
       width: 100%;
       background: red;
    }

<h1> Some Header </h1>
    <div id="fixed-navbar-Id">Nav Controls</div>
    <h3>
        some content <br>some content <br>some content <br>some content <br>
        some content <br>some content <br>some content <br>some content <br>
        some content <br>some content <br>some content <br>some content <br>
        some content <br>some content <br>some content <br>some content <br>
    </h3>