Jquery 在固定图元离开默认位置后更改其样式

我在一个网站上工作，这个网站应该有一个固定的导航菜单，所以它可以和你一起滚动。我遇到的唯一问题是，设计师希望这样，一旦导航离开它的位置并开始向下滚动页面，它就会在顶部拾取一个厚厚的黑色边框。有没有办法在样式开始移动时添加样式

现行守则：

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

ul#stickyNav{背景：url（../../../images/bb/stickyNav bg.jpg）重复-x；高度：56px；位置：固定；宽度：100%；z索引：800；}

您可以从一些示例开始，您可以查看它的实际操作

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

可见性：hidden

祝你好运

CSS

HTML

东西
滚动前进！
有趣的事情

jQuery

$（函数（）{
var$nav=$（“#nav”）；
$nav.get（0）.originalY=$nav.offset（）.top；
});
$（文档）。滚动（函数（）{
var$nav=$（“#nav”）；
var navDOM=$nav.get（0）；
var curY=$（document.scrollTop（）；
//检查是否在导航栏后开始滚动
if（curY>navDOM.originalY）{
如果（$（'#导航克隆'）。长度<1）{
//请注意，每个滚动事件只需克隆一次导航
$nav.clone（）
.attr（'id'，'nav_clone'）
.addClass（'nav'）
.css（'位置'，'固定'）
.css（'top'，0）
.附于（“正文”）；
}
}
//否则，我们将删除克隆的导航
否则{
$（'nav#u clone'）。删除（）；
}
});

---

编辑：请注意，您可以使用适当的ID

#nav

和

#nav_clone

向滚动导航栏或原始导航栏添加自定义CSS样式

.nav

让您可以共享常见的样式。

我没有尝试blint的代码，因此可能也可以使用，但其他人给了我一个更简单的解决方案：

sticky = $('#stickyNav');
classtoAdd = 'nav_active';

$(window).scroll(function(){
/* Sticky Nav stuff */
var window_top = $(window).scrollTop();
if(window_top > 0){
sticky.addClass(classtoAdd);


}else{
sticky.removeClass(classtoAdd);

}
/* End Sticky Nav */


}); 

---

然后，我在CSS中添加了任何新样式，如#stickyNav.nav_active{}

请包含您当前的代码。当然有一种方法。更新以显示代码-还没有机会尝试blint的代码

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

$(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();
    }
});

sticky = $('#stickyNav');
classtoAdd = 'nav_active';

$(window).scroll(function(){
/* Sticky Nav stuff */
var window_top = $(window).scrollTop();
if(window_top > 0){
sticky.addClass(classtoAdd);


}else{
sticky.removeClass(classtoAdd);

}
/* End Sticky Nav */


});