Streaming live at 10am (PST)

Navbar reveal on hover interaction?


#1

I am trying to create this same effect with my navbar as here: http://www.dtelepathy.com/process/

I got the hide on scroll part fine but can't figure out how they got the navbar to be revealed when you hover near the top of the page. Any ideas?

edit: also trying to figure out how they have the navbar reveal with even the slightest scroll up motion with your mouse.


#2

Unfortunately, it is impossible to recreate exact same behavior with only Webflow interactions.
There are several jQuery plugins which can do this. One of them been found by @jbleroux, you can find it here: http://wicky.nillia.ms/headroom.js

Cheers,
Anna


#3

thanks so much for your response! will check it out. have a good one!


#4

I haven't been able to get headroom to workcompletely within webflow not externally hosting. If you do please let me know. I think it's a great script in theory. Have you done any tinkering with it @sabanna


#5

sure.....will do! i'll probably be working on it today.


#6

any luck as far as this javascript?


#7

i honestly haven't been able to try it yet lol had to switch projects this week and moved that project to this upcoming week. will keep you posted.


#8

Hi @dapitts08, actually, I think something similar to this can be done without code in Webflow.

My suggestion would be to create a transparent fixed div that is displayed after first section scroll, and then put a hover interaction on a separate nested div, that changes opacity on hover. Play around with it :slight_smile:

I tinkered around a little bit, I think this may be getting closer to that effect. Here is the link to the example site that can be opened in Webflow: https://webflow.com/website/invisible-fixed-nav

It's fun to tinker, so don't be afraid to experiment :slight_smile:


#9