- index.html
- css file
- styles.css
- js file
- app.js
- README.md
Builds navigation, scrolls to anchors from navigation, and highlights section in viewport upon scrolling.
First function will build the navigation bar by creating a for-of loop that create a list item and get the sections names from the data-nav attribute.
The second function named Intersection Observer to add active-class
class to section when near top of viewport.
- Fist I set the root margin to select the exact viewport
- Second set the
IntersectionObserver
function then check the ration of the entry's if it larger than zero. will addactive-class
. - Third set the observer to observe the sections.
- Code resource here !.
- last function highlight the nav items if the section itself is in the viewport.
- First add scroll
event Listener
to the whole page. - Second create a for-each loop for the
mainNavLinks
to create sections. - Third if the measurement right will add
active-nav
class to the link else, remove theactive-nav
class. - Code resource here !.