я пытаюсь добавить 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 = 'scrl-li '] ") для нацеливания на элементы вместо $ (" # scrl-li ").

Answer 2

Идентификаторы должны быть уникальными и не повторяться по элементам. Изменение вашего идентификатора на классы заставляет этот код работать:

Изменить ссылки на идентификаторы jquery, а также ссылки на идентификаторы html для классов

<li id="scrl-li">

до ...

<li class="scrl-li">

и ....

$("#scrl-li")

до ...

$(".scrl-li")

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

Просматривайте HTML-код при прокрутке, и вы увидите, что атрибуты полей появляются и изменяются соответствующим образом.

Answer 3

Вы не можете иметь больше идентификаторов в своем HTML-шаблоне.У вас может быть только один id = "scrl-li".

В вашем html-шаблоне замените id на класс, а в jquery вместо вызова $ ("# scrl-li") вам придется использовать$ ( "SCRL-ли").

Надеюсь, это поможет вам.