0

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?

Nicolas S.Xu
  • 13,794
  • 31
  • 84
  • 129

1 Answers1

1

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

Community
  • 1
  • 1
MaieonBrix
  • 1,584
  • 2
  • 14
  • 25
  • I think your strategy will work! Here is codepen to try: http://codepen.io/nicolasxu/pen/dXqKPR?editors=1111 Do you know any library for this feature? – Nicolas S.Xu Aug 03 '16 at 02:57
  • 1
    http://scrollmagic.io/ Definetly this one ^^ ScrollMagic is really cool, has its proper syntax but so easy to learn it and you really can add some cool animation based on scroll – MaieonBrix Aug 03 '16 at 09:47