Search code examples
jqueryjquery-scrollify

'active' navigation item depends on certain section


I'm using plugin Scrollify for my landing, all is great, but I can't solve one problem. I have 8 sections, which of them has a different "data-section-name" attribute. Also I have the navigation, it looks like circles with 'active' class. I wrote function, so now when I click on any circle, it becomes 'active' and scroll to certain section. But when I use scroll by mouse, circles' 'active' doesnt' change. What should I do? How can I identify section and do 'active' certain cirlcle?


Solution

  • You can get the active section's data by using $.scrollify.current() method on before() or after() your scrollify() property. By matching your data, you can add active class to your navigation.

    Find below fiddler for your reference.

    Here I used a fixed-nav on left for scroll navigation indication(not captures click event). Hope it helps.