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

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

<强>步骤：

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

例如：

window.pageYOffset

注意：永远不要将jQuery用于这些类型的小东西。它将负载放到服务器上。

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

2 个答案: