▼
Streaming live at 10am (PST)

How to make your navigation appear on scroll using jquery

Design help General
#1

I am trying to use javascript to create a menu like the one here using this demo https://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/

The javascript isn’t working and I was wondering if you can see why? I also tried just using interactions to do it but it didn’t really work. Am I missing something somewhere in the code or css?

#2

Hi @shauncy, thanks for your post. I took a look at the published site, and if you really must use javascript, then and I see two things for you to check next:

A. Move the code from your header of your site, to the footer. The code you have in the header is trying to run, but no jquery is yet loaded, thus causing an error:

Google Chrome.png1000×126 17.5 KB

I would put the following code in the Footer of your site, instead of the Header:

<script type="text/javascript">
(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 200) {
                $('.floatingmenu').fadeIn(500);
            } else {
                $('.floatingmenu').fadeOut(500);
            }
        });
    });
})(jQuery);
</script>

B. There is also an extra line trying to load the latest jQuery. You should not need this line, you can remove it

<script src="https://code.jquery.com/jquery-latest.js"></script>

jQuery is already baked in to Webflow, so no need to add it twice.

I would check those things first, then save and republish your site. After republishing, you can troubleshoot the script by using Chrome Browser, right click on the page and choose Inspect Element, then click on the Console tab and see if there are any errors.

Otherwise, I would definitely use the Webflow interactions for creating your Scroll Nav :slight_smile:

#3

Thank you sir it worked like a charm. Just moving the javascript to the footer fixed it. Thanks for your help.

#4

Hi @shauncy, you can 100% reproduce this with Webflow Interactions. The following demo shows how to do this with a slide effect.

You can use the demo to get started and instead of moving the navigation into place, have it fade in by changing its opacity settings.

Demo: https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Slide Navigation on Scroll

Hope this helps! :slight_smile:

#5