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

【问题标题】：Fix object to top of browser window when scrolling滚动时将对象固定到浏览器窗口的顶部
【发布时间】：2011-08-08 10:29:48
【问题描述】：

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

我的问题是；我怎样才能做到这种效果或做类似这种效果的事情？

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

http://jsfiddle.net/cc48t/

【讨论】：

这个解决方案在每一个浏览器中都闪烁得很厉害。大多数现代浏览器都支持position:fixed，这是内置的 CSS 方式。
是的，我不再使用这个解决方案了。那是基于我当时对设置固定位置的有限知识。使用 position: fixed 的解决方案更好。

【解决方案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 用户来说，这可能是一种更简单的方法，我认为最好只添加和删除一个类（至少对我来说是这样）。

【讨论】：

小建议：你可以使用max_scroll = $("#floatable-nav-bar").position().top，而不是max_scroll = 450。这样，导航栏在到达顶部时会自动浮动（并且使用 jQuery 查找顶部偏移量会导致浏览器之间的任何细微差异）。
我还喜欢同时向 body 添加一个类，以便为您正在修复的元素的高度添加顶部填充，这样页面就不会跳转并且滚动很流畅$('body').addClass("FixedElementOffset");

【解决方案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>

【讨论】：

这是一个更好的解决方案，因为它消除了另一个建议的闪烁，它会在每次滚动时不断重新定位。

【解决方案4】：

用途：

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

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

【讨论】：

【解决方案5】：

通过将 div 的位置设置为position:fixed

【讨论】：

【解决方案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。

这可能是一个好的开始

【讨论】：

【解决方案7】：

与其定义滚动长度，为什么不能定义对象的位置？说一旦它达到 top:0 然后触发脚本。这样会更加设备友好。

【讨论】：

我认为这并不能真正回答问题。他没有问“定义滚动长度”（这意味着什么？）他问他如何才能有一个固定的标题。

【解决方案8】：

CSS 和原生 JavaScript 解决方案（不带 jquery）：

CSS: 用于fixed top 定位。

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

Javascript：相对于用户滚动位置动态地adding/removing CSS 类(.sticky)。

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

下面的示例工作代码：

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>

【讨论】：