如果分配的媒体位于视口中，如何将类添加到链接？
我编码如下：
// Click Function
$('body').on('click', 'a', function() {
$('a.active').removeClass('active');
$(this).addClass('active');
});
// Scroll Function
const 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
哈士奇WWW1回答
-
森栏
我认为 IntersectionObserver 非常适合您的需求。这如何满足您的需求？// Click Function$('body').on('click', 'a', function() { $('a.active').removeClass('active'); $(this).addClass('active');});// Scroll Functionconst 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>
随时随地看视频慕课网APP
相关分类
JavaScript