CODEWITHSUNDEEP
javascript
Nicolas S.Xu
Nicolas S.Xu

Reputation: 14544

Mechanism to update scroll index based on scroll position

I notice a feature on this site: and feature on this site:

If you scroll the items in the middle section, the left menu title will update based on the position of middle section scroll position.

I know it has to handle the scroll event in the middle section, but then what? Does it just use an existing library? What is the mechanism to implement this feature?

Upvotes: 0

Views: 548

Answers (1)

MaieonBrix
MaieonBrix

Reputation: 1624

Ok so here we have two things to deal with :

  • We must know when the top of a specific section is at the top of the viewport (your webrowser window)

  • Then and only then when the specific section if at the top we update the menu according to it

You can easily do that by putting a specific ID to your section, then get the offset.top() position of that element and listening to the window.onscroll and when the current scroll position is equal to the offset.top() position of your element you will add maybe an active class to your menu

like so

 <div id="my-section"></div>
 var mySection = document.getElementById("my-section"),
     mySectionTopPosition = mySection.offsetTop,
     currentWindowScrollPosition = window.pageYOffset;

Then if currentWindowScrollPostion === mySectionTopPosition you will do something accordingly

See this : Getting Window X Y position for scroll and On Scroll Animation using jQuery

Upvotes: 1

Related Questions