当用户滚动到固定分区中的特定部分时，添加或删除列表项上的类

Question

<div class="contact-details" id="contact-details">
    <ul>
        <li class="call"><a href="#"><span>+49 (6131) 143 83 25</span></a></li>
        <li class="email"><a href="#"><span>+49 (6131) 143 83 25</span></a></li>
        <li class="skype"><a href="#"><span>+49 (6131) 143 83 25</span></a></li>
        <li class="run"><a href="#"><span>+49 (6131) 143 83 25</span></a></li>
    </ul>
</div>

脚本

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    windowHeight = $(window).innerHeight();

    if (scroll > windowHeight) {
        $('.contact-details ul li').addClass('active');
        alert("hello");
    } else {
        $('.contact-details ul li').removeClass('active');
    }
});

在这里，我想当固定分区滚动页面时，它是固定的。当列表中的项目滚动横幅时，应在列表项上添加一个类，并在滚动回横幅部分时删除类。

Answer 1

我以为你的横幅在你页面的顶部...

你必须看看你比较的是什么。

如果您将滚动的数量与窗口的innerHeight进行比较，您将不得不在拥有true之前滚动一段时间！

通常，一个窗口的innerHeight比它的填充/边距大得多。

因此，我建议您将滚动量与元素的位置进行比较，以减去遇到的固定元素的outerHeight。

​

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  //windowHeight = $(window).innerHeight();
  var bannerHeight = $("#banner").outerHeight();

  
  $('.contact-details ul li').each(function(){
    if (scroll > $(this).offset().top - bannerHeight) {
      $(this).addClass('active');
      //console.log("hello");
    }
    else
    {
      $(this).removeClass('active');
    }
  });
});

.contact-details{
  height:2000px;
  padding-top:100px;
}
#banner{
  height:70px;
  width:100%;
  position:fixed;
  top:0;
  left:0;
  border:1px solid red;
  padding:12px;
}
.active{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="banner">Banner</div>

<div class="contact-details" id="contact-details">
    <ul>
      <li class="call">
        <a href="#">
          <span>+49 (6131) 143 83 25</span>
        </a>
      </li>
      <li class="email">
        <a href="#">
          <span>+49 (6131) 143 83 25</span>
        </a>
      </li>
      <li class="skype">
        <a href="#">
          <span>+49 (6131) 143 83 25</span>
        </a>
      </li>
      <li class="run">
        <a href="#">
          <span>+49 (6131) 143 83 25</span>
        </a>
      </li>
    </ul>
</div>

​