如果分配的媒体位于视口中，如何将类添加到链接？

Question

我编码如下：// Click Function$('body').on('click', 'a', function() {  $('a.active').removeClass('active');  $(this).addClass('active');});// Scroll Functionconst sectionIsInViewport = document.querySelector('section');observer = new IntersectionObserver((callback) => {  console.log('This section is now in the viewport.');});observer.observe(sectionIsInViewport);* {  margin: 0;  padding: 0;  font-family: sans-serif;  font-size: 30px;  text-decoration: none;  color: inherit;}body {  display: flex;  cursor: default;}#left,#right {  width: 50%;  height: 100vh;  overflow-y: scroll;  scroll-behavior: smooth;}#left {  background-color: rgb(220, 220, 220);}#right {  background-color: rgb(200, 200, 200);}.media {  padding: 10px;  padding-bottom: 0;}.media:nth-last-child(1) {  margin-bottom: 10px;}img {  display: block;  width: 100%;}.link {  cursor: pointer;}.active {  background-color: black;  color: white;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="left">  <a class="link active" href="#landscapes">Landscapes</a>  <a class="link" href="#cats">Cats</a>  <a class="link" href="#food">Food</a></div><div id="right">  <section id="landscapes">    <article class="media">      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">    </article>    <article class="media">      <img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">    </article>    <div class="media">      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">    </div>    <article class="media">      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">    </article>  </section>一般来说，它有效。但是：如果您滚动到正确的区域，.active链接应该会自动更新。因此，如果您滚动到该部分#food，则相应的链接应该是.active。我尝试使用 Intersection Observer，但我不确定它是否是最好的工具。使用 React 有意义吗？如果是，为什么？有人可以帮我吗？会非常感激。<3<3<3

Answer 1

我认为 IntersectionObserver 非常适合您的需求。这如何满足您的需求？

// Click Function

$('body').on('click', 'a', function() {

  $('a.active').removeClass('active');

  $(this).addClass('active');

});

// Scroll Function

const mediaInViewport = document.querySelectorAll('.media');

observer = new IntersectionObserver((entries, observer) => {

  console.log('Next Media in Viewport');

  entries.forEach((entry) => {

    if (entry.target && entry.isIntersecting) {

      entry.target.classList.add('active');

      

      const closestParent = entry.target.closest('section');

      if (closestParent) {

        const selector = closestParent.id;

        const links = document.querySelectorAll('.link');

        for (const link of links) {

          const split = link.href.split('#');

          if (split.length >= 2) {

            const local = split[1];

            if (local === selector) {

              link.classList.add('active');

            }

          }

        }

      }

    } 

  });

}, {threshold: 0.7 } );

window.addEventListener('DOMContentLoaded', () => {

  setTimeout( // Wait for images to fully load

      () => {

      mediaInViewport.forEach((item) => {

        observer.observe(item);

      });

    }

  , 1000);

});

* {

  margin: 0;

  padding: 0;

  font-family: sans-serif;

  font-size: 30px;

  text-decoration: none;

  color: inherit;

}

body {

  display: flex;

  cursor: default;

}

#left,

#right {

  width: 50%;

  height: 100vh;

  overflow-y: scroll;

  scroll-behavior: smooth;

}

#left {

  background-color: rgb(220, 220, 220);

}

#right {

  background-color: rgb(200, 200, 200);

}

.media {

  padding: 10px;

  padding-bottom: 0;

}

.media:nth-last-child(1) {

  margin-bottom: 10px;

}

img {

  display: block;

  width: 100%;

}

.link {

  cursor: pointer;

}

.active {

  background-color: black;

  color: white;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="left">

  <a class="link active" href="#landscape">Landscapes</a>

  <a class="link" href="#cats">Cats</a>

  <a class="link" href="#food">Food</a>

</div>

<div id="right">

  <section id="landscape">

    <article class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">

    </article>

    <article class="media">

      <img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">

    </article>

    <div class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">

    </div>

    <article class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">

    </article>

  </section>

  <section id="cats">

    <article class="media">

      <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg">

    </article>

  </section>

  <section id="food">

    <article class="media food">

      <img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">

    </article>

    <article class="media food">

      <img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">

    </article>

  </section>