Question

我最近在新的gmail和HTML5 bing预览中看到了一个新的有趣功能，它在滚动时将导航栏固定到浏览器窗口的顶部。栏可以在页面上向下开始100px，但是当您滚动并到达浏览器窗口的顶部时，它会固定在那里，直到您向上滚动到它最初定位的位置。

我的问题是;我该怎么做这个效果或做类似这种效果的事情？

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

Answer 1

如果您希望元素在页面上进一步向下，那么在向下滚动时保持固定在顶部，这可能是一个好的开始：

http://jsfiddle.net/cc48t/

Answer 2

我知道这个帖子有点旧，但仍然非常有用..我只是想添加一个jquery版本（有点清洁和可配置），但它是Andrew D.答案的修改版本。

在这种情况下，我没有两个类，而是我有一个相对定位的div，当我到达某个点（max_scroll）时，我向对象添加一个类，并且该类是使它浮动的原因

下面是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>

这是我的导航栏容器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>

最后但并非最不重要的是，我的导航浮动风格

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

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

Answer 3

如果浏览器支持“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>

Answer 4

使用：

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

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

Answer 5

将div的位置设置为position:fixed

Answer 6

你可以这样做：

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

脚本

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

            });

滚动50 px后，它将改变滚动条的CSS。

这可能是一个好的开始

Answer 7

而不是定义滚动长度，为什么我们不能定义对象的位置？说一旦达到顶部：0然后触发脚本。这样它对设备更友好。

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

7 个答案: