Question

我正在我的网站上工作，我想让用户向下滚动时导航栏停留在页面顶部。主要问题是当用户滚动到页面顶部时，我希望标题（显示在导航栏上方）向下推动导航栏。 HTML看起来像这样：

//this is the header (should scroll)
<p1 id="a"><a href="index.html" id="linkNoStyle">TITLE</a></p1>
<p1 id="b">SUBTITLE</p1>

//this div is the nav bar (should stay at top)
<div id="div">
    <a href="projects.html" id="link">PROJECTS</a>
    &nbsp;
    &nbsp;
    <a href="ideas.html" id="link">IDEAS</a>
    &nbsp;
    &nbsp;
    <a href="contact.html" id="link">CONTACT</a>
</div>

//this is also part of the nav bar (should stay at top)
<hr size="5" color=black>

CSS看起来像这样：

#a{
    font-family:Futura;
    font-size:80pt;
    color:black;
}

#b{
    font-family:Futura;
    color:grey;
}

#div{
    padding-top:3px;
    padding-left:10px;
    font-family:Futura;
    background-color:#ff6600;
    color:white;
    height:25px;
}

基本上，我希望导航栏向上滚动页面的其余部分，但是当它到达顶部时，它应该保持在那里。关于如何在我的代码中实现解决方案的说明将不胜感激。感谢。

Answer 1

有一个jQuery插件可以帮到你。它被称为sticky。官方网站：http://stickyjs.com/

这里的代码：

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
    $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0});
    });
</script>

希望这有帮助

Answer 2

您需要将元素的offset().top与窗口的当前scrollTop进行比较。试试这个：

var timer;
$(window).scroll(function() {
    var $div = $('#div');
    clearTimeout(timer);
    timer = setTimeout(function() {
        if ($div.offset().top < $(this).scrollTop()) {
            $div.addClass('fixed');
        }
        else {
            $div.removeClass('fixed');
        }
    }, 250);
});

Example fiddle

请注意scroll函数会针对每个滚动的像素触发一次，因此出于性能原因，计时器就会出现。

当观看者滚动时，如何使我的网站的导航栏保持在顶部？

2 个答案: