Question

我已经尝试了几个小时，但找不到以下代码无法在我的网站上运行的原因（http://robo.im） -

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

我用“脚本”标签在页脚中调用它，并包含所有必需的文件。如果需要，请帮助并查看页面源。

Answer 1

您需要确保将脚本代码放在$(document).ready中。此功能可确保已加载完整的页面内容。否则，您可以将函数应用于不存在的元素。

因此，在您的示例中，您绑定了scroll函数，而文档尚未完成加载。

还要确保已正确加载jQuery。 @adeneo正确地指出Wordpress使用jQuery而不是$作为对jQuery的引用。

请参阅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>

Answer 2

我查看了你的页面，看来jQuery没有绑定到$变量。要么你有一些调用jQuery.noConflict()的脚本（这可能是你已添加的库或你自己的代码中），或者有覆盖$的东西。

我建议修复该问题，或者将代码中的所有$更改为jQuery：

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

或者，如果您确定这不会导致问题，您可以在现有代码之前执行此操作：

$ = jQuery;

最后，正如另一个答案所建议的那样，最好将整个代码块包装在$（document）.ready或类似内容中。一个工作片段是：

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

但是，我在您的网站上尝试了此操作，.home #masthead没有任何内容，所以您实际上看不到它做任何事情。

JavaScript .scroll功能不起作用

2 个答案: