Изменить класс при прокрутке через div

Question

У меня есть липкая боковая панель, как это:

<ul class = "cars">
       <li class=""><a href="javascript:void(0)" class="model" data-id="1"> BMW </a></li>
    ......
        <li class=""><a href="javascript:void(0)" class="model" data-id="2"> Mersedes </a></li>
</ul>

И таблица вот так:

     <div class="element-title" id="car-category-1">BMW</div>
.....
     <div class="element-title" id="car-category-2">Mersedes</div>

Теперь, что я пытаюсь сделать:

Прокрутка <div id="car-category-1> следует изменить класс <li> BMW на .active То же самое для Mersedes, если прокрутить <div id="car-category-2>, затем изменить <li> с Mersedes на active.

это jquery для щелчка свиток

  $(document).on('click', '.model', function () {
        var this_id = $(this).data('id');
        var gotom = setInterval(function () {
            cars_go_to_navtab(this_id);
            clearInterval(gotom);
        }, 400);

        $('.cars li').removeClass('active');
        $(this).parent().addClass('active');
    });
function cars_go_to_navtab(id) {
    var scrolling_div = $('#car-category-' + id);
    $('html, body').animate({
        scrollTop: scrolling_div.offset().top - 70
    }, 500);
}

Answer 1

Существует замечательная статья CSS -Tricks для чистого CSS решения (не уверенного, что оно подходит для вашего варианта использования), в которой также есть ссылка на другой замечательный статья , которая использует Intersection Observer . Короче говоря, поместите что-то вроде этого в свой код:

const observer = new IntersectionObserver(entries =>
{
  for (const entry of entries) {
    if (entry.isIntersecting) {
      // add css style here
    }
    else {
      // remove css style here
  }
});
observer.observe(document.querySelector('#your-element-selector'));

Кроме того, обратите внимание на таблицу поддержки для разных браузеров ( canIuse на помощь)

Answer 2

Простая реализация с использованием Jquery. Кроме того, изучите возможности API наблюдателя пересечения

$(document).on("scroll", function() {
  var scrollPos = $(document).scrollTop();
  $('#menu a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('#menu ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  font-family: helvetica, sans-serif;
}

.content {
  flex: 1;
  padding-left: 200px;
}

.section {
  background-color: grey;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

#menu {
  position: fixed;
  top: 0;
  background: #444;
  width: 200px;
}

#menu a {
  padding: 10px;
  display: flex;
  color: #FFF;
  text-decoration: none;
}

h1 {
  font-size: 30px;
  color: #FFF;
}

.active {
  background: #4CAF50;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <div id="menu">
    <ul>
      <li><a class="active" href="#bmw">BMW</a>
      </li>
      <li><a href="#mercedes">Mercedes</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="section" id="bmw">
      <h1>
        BMW
      </h1>
    </div>
    <div class="section" id="mercedes">
      <h1>
        Mercedes
      </h1>
    </div>
  </div>
</div>