在网站上突出显示单词

Question

想象一下这种情况：您拥有不同类别的站点菜单。如果单词悬停，我可以这样做，但我想这样做：当我向下滚动时，我想在下一个类别的颜色发生变化时设置它。这个怎么设置？非常感谢

Answer 1

你想要这样的东西吗？

$(window).scroll(function(){
  let scrollTop = $(window).scrollTop();
  let cat1Offset = $('#category-1').offset().top;
  let cat2Offset = $('#category-2').offset().top;
  let cat3Offset = $('#category-3').offset().top;
    
  if((cat1Offset - scrollTop) <= 10 && (cat1Offset - scrollTop) >= -$('#category-1').height()){
    $('#cat-1').addClass('active');
  }
  else{
    $('#cat-1').removeClass('active');
  }
  
  if((cat2Offset - scrollTop) <= 10 && (cat2Offset - scrollTop) >= -$('#category-2').height()){
    $('#cat-2').addClass('active');
  }
  else{
    $('#cat-2').removeClass('active');
  }  
  
  if((cat3Offset - scrollTop) <= 10  && (cat3Offset - scrollTop) >= -$('#category-3').height()){
    $('#cat-3').addClass('active');
  }
  else{
    $('#cat-3').removeClass('active');
  }  
})

.category {
 height: 100vh;
}

.category-item {
  transition: background-color 200ms ease-in-out;
}

.category-item:hover{
  background-color:green;
}

#category-1 {
  background-color: blue;
}

#category-2{
  background-color: orange;
}

#category-3 {
  background-color: red;
}

.nav {
  margin:0;
  position: fixed;
  background-color:black;
  width: 100vw;
  padding: 20px;
  color: white;
}

.nav li {
  display: inline;
  list-style:none;
  padding: 15px;
  margin-right: 20px;
}

li.active {
  background-color: green;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<div class="navbar">
  <ul class="nav">
    <li id="cat-1" class="category-item active">Category-1</li>
    <li id="cat-2" class="category-item">Category-2</li>
    <li id="cat-3" class="category-item ">Category-3</li>
  </ul>
</div>

<div id="category-1" class="category mt-2">
</div>
<div id="category-2" class="category mt-2">
</div>
<div id="category-3" class="category mt-2">
</div>

另外，这是working example