Выделите слова на сайте - PullRequest
Новая
       7

Выделите слова на сайте

0 голосов
/ 17 октября 2018

Представьте себе такую ​​ситуацию: вы попали в меню сайта с разными категориями.Я могу сделать это, если слово наведено, но я хочу сделать это: когда я прокручиваю вниз, я хочу установить это, когда цвет следующей категории изменится.Как установить это?Большое спасибо

1 Ответ

0 голосов
/ 17 октября 2018

Хочешь что-нибудь подобное? 

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

Также, вот рабочий пример

...