[Solved] Secondary sticky Nav or nav that shrinks on scroll

Need help
1

Hey guys!

I’m trying to figure out how to make a secondary nav sticky. Great example is here:
http://demo.hongkiat.com/css-sticky-position/index2.html

or

http://designmodo.com/demo/stickynavigation/

Is this possible?

2

I’m not sure if this is the most efficient/cleanest way to accomplish this – but I made three floating groups to obtain that secondary nav sticky effect. Two floating headers (that say ‘fixed’) remain in place on the page (so the float setting for both of them is set to ‘nothing’). Then I used a third floating header (hidden on page load) that only becomes visible once the current scrolling position of the page is greater than 100.

Preview:

Editor:

6 Likes
3

Interesting! I will give it a go!

1 Like
4

This is working great BTW. Thanks again!

1 Like
5

Awesome! No prob! :slight_smile:

6

I feel like the examples here are not working anymore

I am trying to acheive the same result as OP but cant recreate it,

7

this is easily doable by using this this plugin: 🚀[NEW PLUGIN] Scrollable Animation :slight_smile: