当滚动时，将对象固定在浏览器窗口的顶部

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.

最近，我在新的gmail和HTML5 bing预览版中看到了一个有趣的新特性，它在滚动时将导航条固定在浏览器窗口的顶部。这个工具条可以向下滚动100px，但当你滚动到浏览器窗口的顶部时，它会在那里固定，直到你向上滚动到原来的位置。

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.

我希望你能理解我的问题以及我想要描述的。

7 个解决方案

#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/

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

我知道这篇文章有点旧，但仍然很有用。我只是想添加一个jquery版本(稍微干净一点并且可配置)，但它是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

在这种情况下，我没有两个类，而是有一个相对位置div，当我到达某个点(max_scroll)时，我向对象添加了一个类，这个类使它浮动

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

下面是javascript(在de document ready函数中完成)

<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。

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

我知道这不是最简单的例子，但对于jQuery用户来说，这可能是一种更简单的方法，我认为最好只添加和删除一个类(至少对我来说是这样)。

#3

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

如果浏览器支持“position:fixed”下一个普通的javascript示例会更快:

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

#4

Use:

使用:

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

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

“fixed”表示元素相对于浏览器窗口的位置。

#5

By setting the div's position to position:fixed

通过设置div的位置:固定

#6

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.

在滚动50px之后，它将改变scroller的css。

this may be a good start

这可能是一个好的开始

#7

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.

与其定义滚动条，为什么我们不能定义对象的位置呢?一旦它到达顶部:0，然后触发脚本。这样，它将更有利于设备。

#1