在 div 中添加/删除活动 class scrollspy 导航并溢出

Question

I'm trying to create a navigation menu inside a self scrolling div using html/css/jquery. I need the menu items to toggle the active class when the item is in view or reaches the top of the div while scrolling.

basically what i need is exactly this: https://codepen.io/vlrprbttst/pen/LkjZbE?editors=1010 but inside a self scrolling div.

I created this pen: https://codepen.io/frontend2020/pen/ExWaXVE which kinda works, but the active class triggers too soon and I can't understand why.

I am pretty sure the calculation problem is in this bit of code

if (
      refElement.position().top <= scrollPos &&
      refElement.position().top + refElement.height() > scrollPos
    )

i've tried logging scroll position and elements position and everything seems to match but I think i'm off track but i can't understand what I'm missing.

A solution or even a hint would be highly appreciated. thank you so much

Answer 1

What you're looking for is a scrollspy .

Basically, what you want to do is add an event listener to the document. When the user scrolls, loop through all sections and check whether the element is in viewport. If it is, add the corresponding class to the corresponding nav element. If it isn't, remove that class.

Demonstrated like below:

 $(document).ready(function() { function isElementInViewport(el) { if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } var sections = $('.section'); $(document).scroll(function() { for (let i = 0; i < sections.length; i++) { let cur = sections[i]; let corresponding = $('li[data-id="' + $(cur).data('for') + '"'); if (isElementInViewport(cur)) { corresponding.addClass('active'); } else { corresponding.removeClass('active'); } } }) })

 .section.first { margin-top: 100px; }.section { height: 500px; border: 1px solid; }.nav { position: fixed; top: 0; }.nav.active { background-color: #ff4a4a; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav"> <ul> <li data-id="1">Section 1</li> <li data-id="2">Section 2</li> <li data-id="3">Section 3</li> </ul> </div> <div class="section first scrollspy-target" data-for="1"> Section 1 </div> <div class="section scrollspy-target" data-for="2"> Section 2 </div> <div class="section scrollspy-target" data-for="3"> Section 3 </div>

Edit: I recommend testing the demo out here .