Scroll Interaction: Navbar hiding. What am I missing?

Design help Animations & Interactions
1

I’ve sifted through a lot of similar posts but can’t find anything that solves my problem. Apologies in advance if this is a repeat!

Why is my navbar disappearing when you scroll back to the top?

I have an interaction called “navbar scroll” and it have applied it to each section, which I think you can see the details of in the public share link below.

Note: It only doesn’t work when you scroll from the bottom to the hero section. It’s working as expected on all the other sections.

I’m sure I’m missing something obvious but would appreciate your feedback!

Here is my public share link: https://preview.webflow.com/preview/laurahines2?preview=f139717bd4b05e03b1fb884613375600

Here is my staged (draft) site: http://laurahines2.webflow.io/

2

I’m having trouble figuring out what you’re trying to get the navbar to do, and I think it’s a result of you overthinking your problem.

What, exactly, do you want the navbar to do as you scroll down, and back up, the page?

3

Thanks so much @Cricitem! It’s fine when you load and fine when you scroll down. However, if you scroll down and then scroll back to the very top, the navbar isn’t there. I’d like to keep everything working as-is but have the navbar show its face when you scroll to the hero section from the bottom.

I am definitely overthinking. Any simplifying advice would be so appreciated!!

4

But why do you have an interaction on the nav at all? Do you want it to disappear at any point? Should it be visible when you initially load the page?

5

When I initially loaded the project, the nav bar would blink on and off seemingly at random as I scrolled up and down the page, but I can’t imagine that’s how you wanted it to function.

6

Thanks again @Cricitem ! The dream here is to have the navbar show up only when you’re actively scrolling. So for example, if you’re actually reading the text in the “about me” section the navbar isn’t there.

Having said that, your feedback is so helpful in making me re-think the user-friendliness of this from a UX standpoint…but I would still love to get to them bottom of why it won’t show up when you scroll from bottom to top!

7

I may be missing something here, but how would it be possible to use the navbar at all if it only shows up while you’re scrolling? The moment you stop scrolling to click on something in the navbar, it would be gone.

8

I’ve got an idea that may be worth trying.

What if, instead of making it the action of scrolling that hides the navbar (It’s not actually doing that right now, anyway. It’s hiding it at certain points and showing it once you scroll back up past that point) you make the navbar initially visible, then have the downscroll event of the header put the navbar down to 0% opacity? Then, put an interaction on the navbar itself to go back to 100% opacity once you hover over it?

Like this…

1425×746 1.77 MB

Ignore my activity monitor crashing. lol

1 Like
9

@Cricitem BRILLIANT! I love this idea. Can’t thank you enough. Will implement tomorrow when I am sufficiently re-caffeinated.

1 Like
10

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