jquery - 固定元素离开默认位置后更改样式

Question

我在一个应该有固定导航菜单的网站上工作，所以它会随着你滚动。我遇到的唯一问题是设计者想要做到这一点，所以一旦导航离开它的位置并开始向下滚动页面，它就会在顶部拾取一个黑色的粗边框。有没有办法在它开始移动后添加样式？

现有代码:

<ul id="stickyNav">
<li class="technology"><a href="#technology">Technology</a></li>
      <li class="sales"><a href="#sales">Sales</a></li>
      <li class="operations"><a href="#operations">Operations</a></li>
      <li class="marketing"><a href="#marketing">Marketing</a></li>
      <li class="profitability"><a href="#profitability">Profitability</a></li>
</ul>

ul#stickyNav{background: url(../../../images/bb/stickynav-bg.jpg) repeat-x; height: 56px; position: fixed; width: 100%; z-index: 800;}

Answer 1

这里是一些示例，您可以查看 this fiddle看看它的实际效果!

请注意，我必须克隆导航，以免弄乱实际的 DOM。如果您的导航有很多交互，您可以在它开始滚动时使用 visibility: hidden。

祝你好运!

CSS

#body {
    position: relative;
    top: 0;
}
#content {
    height: 2000px;
}
.nav {
    width: 100%;
    background: black;
    color: white;
}

HTML

<div id="body">
    <h1>Stuff</h1>
    <div id="nav" class="nav">Scroll on the go!</div>
    <div id="content">Interestring things</div>
</div>

jQuery

$(function() {
    var $nav = $("#nav");
    $nav.get(0).originalY = $nav.offset().top;
});
$(document).scroll(function() {
    var $nav = $("#nav");
    var navDOM = $nav.get(0);
    var curY = $(document).scrollTop();

    // Check whether it started scrolling after the navbar
    if (curY > navDOM.originalY) {
        if ($('#nav_clone').length < 1) {
            // Note that you only have to clone the navigation once per scroll event
            $nav.clone()
                .attr('id', 'nav_clone')
                .addClass('nav')
                .css('position', 'fixed')
                .css('top', 0)
                .appendTo("#body");
        }
    }
    // Else, we remove the cloned navigation
    else {
        $('#nav_clone').remove();
    }
});

编辑:请注意，您可以使用适当的 ID #nav 和 #nav_clone 将自定义 CSS 样式添加到滚动导航栏或原始导航栏。 .nav 让您共享常用样式。