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

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');
    }
});

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

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>