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

Question

我有一个简单的粘性标题，我想在 div/class/id 到达窗口顶部时更改其背景颜色(并在向上滚动时变回原来的颜色)。不只是一次，而是多次。

粘性 header 的基本代码是这样的，https://jsfiddle.net/wzrfg2xe/1/

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>

CSS

ul { margin: 0; }
.greedy-nav {
height: 40px;
position: relative;
min-width: 250px;
width: 100%;
background: #513e5d;
width: 100%;
text-align: center; }

.greedy-nav a {
display: block;
padding: 0 30px;
line-height: 40px;
font-size: 16px;
color: #ddd;
text-decoration: none; }

.greedy-nav a:hover { color: #fff; background: rgba(0,0,0,.1); }

.greedy-nav .visible-links { display: inline-table; }
.greedy-nav .visible-links li { display: table-cell; }
.greedy-nav .visible-links li:first-child { font-weight: bold; }
.greedy-nav .visible-links li:first-child a { color: #fff !important; }

.sticky-element,
.sticky-element-positioner {
height: 40px;
text-align: center;
width: 100%;
z-index: 5; }

.sticky-element { position: static; }

.sticky-element.sticky-element-sticky {
position: fixed;
left: 0;
top: 0;
margin: 0; }

.sticky-element-positioner { position: static; }

.one { background: green; height: 300px; }
.two { background: yellow; height: 300px; }
.three { background: red; height: 300px; }
.four { background: blue; height: 300px; }
.five { background: orange; height: 800px; }

JS

$(document).ready(function() {

var stickyElement = $('.sticky-element'),
stickyElementPositioner = $('.sticky-element-positioner');

function stickyElementFixed() {
stickyElement.addClass("sticky-element-sticky");
}

function stickyElementStatic() {
stickyElement.removeClass("sticky-element-sticky");
}

$(window).scroll(function() {
var elementTarget = (stickyElementPositioner.offset().top);
var scrollTop = $(window).scrollTop();

if (scrollTop <= elementTarget) {
stickyElementStatic();
} else {
stickyElementFixed();
}

});

});

我四处搜索并在堆栈上找到了关于它如何工作的答案，jsfiddle.net/8onnaqL7/(取自 this post )。

将它们加在一起得到这个，http://jsfiddle.net/tpuqtobo/

现在看来它完全删除了整个粘性标题样式。我尝试了多种不同的方法来使其发挥作用，但我就是无法弄清楚。

有没有办法在不使用插件的情况下实现我正在寻找的目标，您可以猜测从窗口顶部向下滚动了多远？

澄清一下，在实际设计中，粘性标题出现在标题下方，因此它从一开始就不是在顶部。

如果有另一种方法来处理粘性和背景颜色的变化，我愿意听取任何可能有效的建议。

预先感谢您的宝贵时间!

Answer 1

您的 removeClass() JS 代码正在删除所有类，包括 greedy-nav 类，这会导致您的导航中断。

您应该这样做，而不是仅仅添加 project-x 类:

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

在这里工作 fiddle :http://jsfiddle.net/tpuqtobo/1/

希望这有帮助。干杯