javascript - 滚动后突出显示事件的 div

Question

有没有一种简单的方法可以在用户滚动到 top with id(应用具有特定颜色 f.e. 的 css-class)后突出显示它？我在页面上有一个 scrollspy，但似乎插件不会帮助我，所以我无法维持生计。

附言我没有在 Google 或 StackOverflow 中找到类似的信息，所以请不要误会我的意思。

有个粗略的页面例子

https://jsfiddle.net/masyurik/kdnzdeb2/#&togetherjs=DeaMiBADpp

HTML

<div id="secA" class="section">
Hello it's secA
  <div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

<div id="secB" class="section">
Hello it's secB
  <div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

<div id="secC" class="section">
Hello it's secC
  <div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

CSS

.section {
  background-color: red;
}

.active {
  background-color: yellow;
}

Answer 1

您需要使用 scrollevent 并相应地更改类...请检查 https://jsfiddle.net/77v3329y/1/

jQuery

$(document).ready(function() {
  var a = +$('#secA').height();
  var b = $('#secB').height();
  var c = $('#secC').height();
  console.log(a);
  console.log(b);
  console.log(c);
  $(window).on('scroll', function() {
    $('#secA, #secB, #secC').removeClass('active');
    var st = $(document).scrollTop();
    if (st < a) {
      $('#secA').addClass('active');
    }
    if (st > a) {
      $('#secB').addClass('active');
    }
    if (st > a + b) {
      $('#secC').addClass('active');
    }
  })
});