Streaming live at 10am (PST)

Fixed Navigation fadeout during scroll, show on stop scroll


#1

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


#2

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 smile


#3

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: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile
Cheers,
Dave


#4

Hi Mate wink

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

smile

THX !!!


#5

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!


#6

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