Semi-fixed navbar effect

Design help General
1

Hi there Webflowers!
I have an idea for a semi-fixed navbar effect, but I have no idea how to create it in webflow.
I’ve made a sketch, so you can see what is it all about:

1920×1080 16.3 KB

Orange rectangle is your browser window. The blue section is a classic hero section with some hero heading in it. When you start scrolling, hero section have to shrink somehow to form a fixed menu on the top.
First of all, how do i get all the content after the hero section not to show above the fixed menu when scrolled, if the menu has a top margin of let’s say 100px?
Would appreciate any ideas on such tricky matter!

2

Hello, @kajtom.

Interesting idea. And where is the Parallax part here?

3

Well, I might misslead you a bit, but i didn’t really knew how to name this effect. If the blue hero section had only blue bg, I guess I could just make the navbar fixed, filled with the same color, but I need it to have a gradient bg with some non-repeatable pattern. In addition it should shrink to a certain height, and stay this way. On top of that, all the hero section content should disappear before leaving the section (suppose this can be done with some interactions?).

Sorry again for confusing title! How would you name this effect?

4

Ok, it sounds like some complex interaction. Maybe you could create such structure, as an example, and share the read-only link here. Then we could try to play around with that for getting the effect that you need.

Cheers,
Anna

5

I think I’ve figured something out.

https://preview.webflow.com/preview/sarahs-radical-site-80f4ba?preview=9e719406e263a1339f078a369858fa89

My solution requires some custom code.

Basically, once you scroll down a bit, have js add a class (.flexy-header) to a hero section wrapper. You can then style the newly classed .hero.flexy-header and its children. It can adjust smoothly if you add some CSS transition properties.

Header Code

<style>

.flexy-header { height: 10vh; }
.hero-content { transition: all 3s ease, opacity 0.5s ease; opacity: 1; }
.flexy-header .hero-content { opacity: 0; height: 0; transition: all 3s ease, opacity 0.5s ease; }

</style>

Footer code

Change 100 to another number. 100 represents how many pixels down from the top the animation begins.

<script>

// When the window loads, note the scroll position
// and add and remove classes accordingly

  $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
          $('.hero').addClass("flexy-header");
      } else {
          $('.hero').removeClass("flexy-header");
      };
  });

</script>

Sorry, I couldn’t figure this out with just webflow interactions.

1 Like
6

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