Javascript 每当某个类到达窗口顶部时，尝试更改粘性标题背景

我有一个简单的粘性标题，每当div/class/id出现在窗口顶部时，我都想更改其背景颜色（当向上滚动时会更改）。不是一次而是多次

粘性头的基本代码如下：

HTML代码：

<div class="sticky-element-positioner">
<div class="sticky-element">
<nav class='greedy-nav'>
<ul class='visible-links'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
</div>
</div>

<section class="one"> blabla</section>
<section class="two"> blabla</section>
<section class="three"> blabla</section>
<section class="four"> blabla</section>
<section class="five"> blabla</section>

JS

$（文档）.ready（函数（）{
var stickyElement=$（'.stickyElement'），
StickyElement定位器=$（'.StickyElement定位器'）；
函数stickyElementFixed（）{
addClass（“stickyElement sticky”）；
}
函数stickyElementStatic（）{
removeClass（“stickyElement sticky”）；
}
$（窗口）。滚动（函数（）{
var elementTarget=（stickyElementPositioner.offset（）.top）；
var scrollTop=$（窗口）.scrollTop（）；
如果（scrollTop尝试以下操作：

$(".greedy-nav").removeClass().addClass("greedy-nav project1");

您删除了所有包含贪婪导航的类，因此需要再次添加css样式。
您只能通过css实现这一点，但需要添加

.sticky-element.sticky-element-sticky .greedy-nav {
    background: red;
}

不仅

.sticky-element.sticky-element-sticky {
    background: red;
}

因为您的主要背景标题样式位于
.greedy nav
元素上

这对您有帮助吗？
您的
removeClass（）
的JS代码正在删除所有类，包括
贪婪nav
类，这会导致您的nav中断

不要只添加
project-x
类，您应该执行以下操作：

$(".greedy-nav").removeClass().addClass("greedy-nav project2");

在这里演奏小提琴：

希望这有帮助。干杯
你需要使用这个方法
请在下面尝试使用工作代码片段


$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
$（'a[href^=“#“]”）。关于（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'a'）。每个（函数（）{
$（this.removeClass（'active'）；
})
$（this.addClass（'active'）；
var target=this.hash，
菜单=目标；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top+2
}，500，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'#菜单中心a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（“#菜单中心ul li a”）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}
body，html{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
.菜单{
宽度：100%；
高度：75px；
背景色：rgba（0,0,0,1）；
位置：固定；
背景色：rgba（4180,49,0.6）；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
.灯光菜单{
宽度：100%；
高度：75px；
背景色：rgba（255、255、255、1）；
位置：固定；
背景色：rgba（4180,49,0.6）；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
#菜单中心{
宽度：980px；
高度：75px；
保证金：0自动；
}
#菜单中心{
利润率：15px0；
}
#菜单中心{
列表样式：无；
利润率：0.30px 0.0；
显示：内联；
}
.主动{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：#fff；
文字装饰：无；
线高：50px；
}
a{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：黑色；
文字装饰：无；
线高：50px；
}
#菜单1{
背景颜色：灰色；
身高：100%；
宽度：100%；
溢出：隐藏；
背景图片：url（images/home-bg2.png）；
}
#菜单2{
背景图片：url（images/portfolio bg.png）；
身高：100%；
宽度：100%；
}
#菜单3{
背景颜色：蓝色；
身高：100%；
宽度：100%；
}
#菜单4{
背景色：红色；
身高：100%；
宽度：100%；
}











谢谢！这看起来也会起作用。我会尝试你的方法和@Gurtej Singh的方法，看看哪种方法最适合我的需要。再次感谢！@excelsi-很高兴帮助你……如果你找到了解决方案，请
投票
并标记为
接受
。这将有助于其他人找到正确答案。谢谢你，谢谢这是我忽略的问题，它现在运行得很好！@excelsi如果它解决了您的问题，请将其标记为已接受的答案，以便帮助他人。谢谢。
.sticky-element.sticky-element-sticky {
    background: red;
}

$(".greedy-nav").removeClass().addClass("greedy-nav project2");