Fixed Navigation fadeout during scroll, show on stop scroll

[raziel79 (Dave)]

Hi all,

can anyboby help me?
I need to have fixed top navigazione bar with opacity 100% (default). When scrolling and during scroll events the opacity value decrease to 50%, when stop scroll the opacity must be reset to 100% of opacity ?

has this features built-in ? or i need to do custom?

Thanks in advance

Dave

[vincent (Vincent Bidaux)]

Custom.

What you need is continuous control of the scrolling, and you can achieve that with Javascript.

Webflow will only let you use the events listed in the triggers box: hover in and out, element shows up or disappear, first and second click, and a few widget related triggers. That will be very cool when we can use continuous scroll triggers right within Webflow

[cyberdave (Dave S.)]

Hi @raziel79, thanks for the post. There you can set your opacity using triggers, which include scroll into view and scroll out of view. You can setup different triggers on different sections on your page to adjust the opacity as you wish.

Can you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance!
Cheers,
Dave

[raziel79 (Dave)]

Hi Mate

thanks all, great solutions

I try i update soon to get feedback,

i cannot post link right now, is private project i cannot sharing on web before publish website. I make a demo in a few days

THX !!!

[bartekkustra (Bartosz Kustra)]

Hey,

put the following in the custom code - footer code in site dashboard. Change .navbar-classname to your navigation classname.

<script>
$(document).ready(function() {
  $(window).scroll(function(e) { 
    $('.navbar-classname').css('opacity',0.5);
  });
  $(window).on('scrollstop', function(e) {
    $('.navbar-classname').css('opacity', 1);
  });
});
</script>

I have not tested it. If it doesn’t work for you post preview link as @cyberdave asked for and the published website link. Thanks!