JavaScript .scroll function not working

Question

I have been trying for hours now but couldn't find a reason why the following code is not working on my site (http://robo.im) -

    <script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 400) { 
            $('.home #masthead').css("opacity", 0.98);
        }
        else{
            $('.home #masthead').css("opacity", 0);
        }
    });
    </script>

I'm calling it in the footer with 'script' tags and have included all the necessary files. Kindly help and take a look into the page source if required.

You should probably lead with the fact that you're using Wordpress, then someone would have pointed you to the codex, which specifically states that jQuery is in no-conflict mode in Wordpress. — adeneo
– adeneo, Commented Dec 28, 2013 at 14:53
There's no need for document.ready, the window is always available, it doesn't have to wait for the document to load. The issue is that Wordpress does not use $, it uses jQuery as it's in no-conflict mode by default -> codex.wordpress.org/Function_Reference/… — adeneo
– adeneo, Commented Dec 28, 2013 at 14:57

Bas van Dijk · Accepted Answer · 2013-12-28 15:14:54Z

2

You need to make sure you put your script code within the $(document).ready. This functions makes sure the complete page content has been loaded. Otherwise you could apply functions to elements which do not exist.

So in your example you are binding the scroll function while the document has not been completed loaded yet.

Also make sure you have loaded jQuery correctly. @adeneo pointed correctly that Wordpress uses jQuery instead of $ as the reference to jQuery.

See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 400) { 
            $('.home #masthead').css("opacity", 0.98);
        }
        else{
            $('.home #masthead').css("opacity", 0);
        }
    });
});
</script>

edited Dec 28, 2013 at 15:14

answered Dec 28, 2013 at 14:53

Bas van Dijk

10.8k10 gold badges62 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Alexander · Accepted Answer · 2013-12-28 14:50:43Z

0

I have looked at your page, and it appears that jQuery is not bound to the $ variable. Either you have some script that is calling jQuery.noConflict() (this may be in a library that you have added or in your own code) or there is something overwriting $.

I would suggest either fixing that issue, or changing all $ in your code to jQuery instead:

jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 400) { 
        jQuery('.home #masthead').css("opacity", 0.98);
    }
    else{
        jQuery('.home #masthead').css("opacity", 0);
    }
});

Alternatively, if you are sure this will not cause problems, you can do this just before your existing code:

$ = jQuery;

Finally, as advised in another answer, it would be best to wrap your entire code block in a $(document).ready or similar. A working snippet would be:

$ = jQuery;
$(function() {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 400) { 
            $('.home #masthead').css("opacity", 0.98);
        } else{
            $('.home #masthead').css("opacity", 0);
        }
    });
});

However, I tried this on your site, and whatever is .home #masthead has no content, so you won't actually see it doing anything.

answered Dec 28, 2013 at 14:50

Chris Alexander

1,31214 silver badges20 bronze badges

1 Comment

adeneo Over a year ago

This is just wrong, if the CMS doesn't map $, neither should you, you should use a closure that sets a scope where $ is defined, not assign a global.

Collectives™ on Stack Overflow

JavaScript .scroll function not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related