Streaming live at 10am (PST)

Secondary sticky nav top of browser when scrolling


#1

Hello,

I could use a bit of help! I’m working on product feature site with a nav menu below the hero section. I would like that nav to stick below the main navigation at the top of the page when the user scrolls, also to reduce in size. When the the user scrolls back to the original position the nav will go back to its original height. Here is a site foe reference https://www.youneedabudget.com/features/.

I have no idea how to approach this and I’ve searched through the forums and I only found out of date articles with broken links :confused:. Any help, guidance, articles, references will be appreciated!

Here is the work in progress site: http://www.oneder.com/product-features-copy-test

Thanks,
Danny


#2

You need to combine some third-party JS libary with Webfow.

How-To - try to find articles about slick.js or any other JS-libary (A lot examples - The same idea is for this).

Start from this - than try to solve the “reduce size effect” - again by some custom code (Or try interactions)

Also try to find Q about this libary (I help someone with this):
https://rgalus.github.io/sticky-js/


#3

Thanks @Siton_Systems I’ll give this a try!


#4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.