如何让我的标题 div 滚动直到它到达页面顶部？

Question

我目前使用固定定位来将标题保持在页面顶部，即使用户滚动也是如此。但是，我想在标题上方添加徽标和其他内容，但不像标题那样保持固定。有没有办法使用 CSS 或 HTML 让标题正常滚动此内容，直到标题到达页面顶部，它会像现在一样运行并悬停在页面上的文本上方？

更新
我对 jQuery 和 Javascript 不是很有经验。这是我的标题的 HTML 代码：

<div class="navbar-fixed-top" role="navigation">
    <div class="container">
            <ul class="pull-left">
                <li class="selected"><a href="index.html">Home</a></li>
                <li><a href="about/index.html">About</a></li>
                <li><a href="clients/index.html">Clients</a></li>
            </ul>
                <div class="logobackground">
                    <a href="index.html"><img class="logo" src="img/logo.png"></a>
                </div>
            <ul class="pull-right">
              <li><a href=“mailto:........@...biz">Contact</a></li>
        </ul>
    </div>
</div>

我必须使用什么 Javascript 或 jQuery，我应该把它放在我网站目录的什么位置？

Answer 1

为此，您需要 javascript (jquery)。

下面的 jsfiddle http://jsfiddle.net/5n4pF/4/（不是最简单的例子）展示了如何做到这一点。最重要的是jquery是正确的。你应该使用：

$(window).scroll(function(){
        if ($(window).scrollTop() >= 147) {
            $("#top_nav").addClass("fixed");

        } else {
            $("#top_nav").removeClass("fixed");
        }
});

现在您可以设置#top_nav.fixed 的样式，使其保持在页面顶部，而您的#top_nav 则保持正常位置。

Answer 2

我认为这样会更好，因为我在做这些事情时总是使用这种方法。

步骤：

1. 处理window的.onscroll事件
2. 获取window.pageYOffset
3. 使用三元运算符（停止它的条件）将 div 的 .style.marginTop 设置为 window.pageYOffset。

例如：

window.onscroll = function() {
    document.getElementById("myDiv").style.marginTop = window.pageYOffset <= 147 ? 147 : window.pageYOffset;
}

注意：千万不要将 jQuery 用于这些类型的小事情。它将负载加载到服务器上。