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

    <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.

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.

• javascript
• jquery
• css
• scroll

• 3 Did you place it inside the $(document).ready? – Bas van Dijk Commented Dec 28, 2013 at 14:43
• @Robo see the above ment by osi. – Jai Commented Dec 28, 2013 at 14:48
• I didn't get that @osi, totally new to Javascript. – lokogl Commented Dec 28, 2013 at 14:48
• 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 Commented Dec 28, 2013 at 14:53
• 1 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/Function_Reference/… – adeneo Commented Dec 28, 2013 at 14:57

2 Answers 2

You need to make sure you put your script code within the $(document).ready. This functions makes sure the plete 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 pleted 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/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>

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.