在网站上突出显示单词

Question

想象一下这种情况：您已经在“网站”菜单上找到了不同类别的目录。如果单词悬停了，我可以这样做，但是我想这样做：当我向下滚动时，当下一个类别的颜色更改时，我想设置它。如何设置呢？非常感谢

Answer 1

您想要这样的东西吗？

Method 2

$(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;
}

另外，这是一个working example