滚动 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>应该将 BMW 的<li>的类更改为 .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 的简单实现。 此外，探索Intersection Observer 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>