我正在尝试在向下滚动后将 CSS 添加到所有元素' li '但它仅适用于第一个 li

Question

向下滚动后，它只应用主页按钮。

这是我的代码。

<ul class="mainmenu nav sf-menu" style="float: right;">
<li class="active" id="scrl-li">
<a href="index.html"><span>Home</span></a>
</li>
<li  id="scrl-li">
<a href="about.html" ><span>About Us</span></a>
</li>
<li id="scrl-li">  
<a href="about.html" ><span>Services</span></a>
</li>
</ul>

JavaScript 代码：

$(document).ready(function() {
var scrollTop = 0;
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (scrollTop >= 100) {
$("#scrl-li").css("marginTop","-20px");
} else if (scrollTop < 100) {
$("#scrl-li").css("marginTop","0px");
} 
});
});

Answer 1

其他海报是正确的，每页应该只有一个 ID，但如果您无法通过使用标记来控制标记，您仍然可以解决此问题 $("[id='scrl-li']"( 来定位元素而不是 $("#scrl-li"(。

Answer 2

Id 应该是唯一的，并且不能跨元素重复。将您的 id 更改为类可使以下代码正常工作：

更改 jquery id 引用以及对类的 html id 引用

<li id="scrl-li">

自。。。

<li class="scrl-li">

和。。。。

$("#scrl-li")

自。。。

$(".scrl-li")

JSFIDDLE： https://jsfiddle.net/xpvt214o/794901/

滚动时查看 html 代码，您将看到边距属性出现并相应更改。

Answer 3

html 模板中不能有更多 id。您只能有一个 id="scrl-li"。

在 html 模板中，将 id 替换为类，在 jquery 中，而不是调用 $("#scrl-li"(，您必须使用 $(".scrl-li"(。

希望这对您有所帮助。