search

toviszsolt / react-scrollspy

ScrollSpy React Component - Automatically update navigation components based on scroll position to indicate which link is currently active in the viewport.
https://32jhvk.csb.app
MIT License
30 stars 5 forks source link

Second Last Link Always Highlighted When Page is Fully Scrolled (Sticky Navigation) #13

Closed channiboi1998 closed 3 months ago

channiboi1998 commented 3 months ago

Description: There is an issue with the scroll spy functionality where the second last link in the sticky navigation is always highlighted instead of the last link when the page is scrolled to its maximum extent. This occurs because the last section does not reach the y-axis position required to trigger its activation, leaving the second last link highlighted instead.

Steps to Reproduce:

  1. Navigate to a page with a sticky navigation and scroll spy functionality.
  2. Scroll to the bottom of the page, ensuring the viewport is maxed out.
  3. Observe that the second last navigation link is highlighted, even though the content for the last section is visible.

Expected Behavior: The last navigation link should be highlighted when the page is scrolled to its maximum extent, ensuring consistent and accurate navigation feedback for the user.

Actual Behavior: The second last navigation link remains highlighted when the page is scrolled to the bottom, despite the last section being in view.

Possible Solution: Adjust the scroll spy logic to account for scenarios where the page is scrolled to its maximum extent, ensuring the last section's navigation link is activated accordingly.

toviszsolt commented 3 months ago

Hi @channiboi1998, thank you for your feedback!

Please read this (#10) issue to learn how you should use the parameters related to intersectionObserver. You should understand and learn how to configure root, rootMargin and threshold parameters.

Please be sure to report back whether or not your problem has been solved.

channiboi1998 commented 3 months ago

Hi @toviszsolt, did not expect a fast reply. In my case it turns out that I just have to assign the section ids on the right element. My bad. Thank you for responding!

toviszsolt commented 3 months ago

@channiboi1998

I'm glad that your problem has been solved.

If you found this project interesting, please consider supporting my open source work by sponsoring me on GitHub / sponsoring me on PayPal / give the repo a star.