JavaScript .scroll 函数不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20815779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript .scroll function not working
提问by Robo
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) -
我已经尝试了几个小时，但找不到以下代码在我的网站上不起作用的原因（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.
我在页脚中使用“脚本”标签调用它，并包含了所有必要的文件。如果需要，请提供帮助并查看页面源。
采纳答案by Bas van Dijk
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.
您需要确保将脚本代码放在$(document).ready. 此功能可确保已加载完整的页面内容。否则，您可以将函数应用于不存在的元素。
So in your example you are binding the scrollfunction while the document has not been completed loaded yet.
因此，在您的示例中，您scroll在文档尚未完成加载时绑定了该函数。
Also make sure you have loaded jQuery correctly. @adeneo pointed correctly that Wordpress uses jQueryinstead of $as the reference to jQuery.
还要确保您已正确加载 jQuery。@adeneo 正确指出 Wordpress 使用jQuery而不是$作为对 jQuery 的引用。
See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
见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>
回答by Chris Alexander
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 $.
我看过你的页面，似乎 jQuery 没有绑定到 $ 变量。要么您有一些正在调用jQuery.noConflict() 的脚本（这可能在您添加的库中或您自己的代码中），要么有一些东西覆盖了 $.
I would suggest either fixing that issue, or changing all $ in your code to jQuery instead:
我建议要么修复该问题，要么将代码中的所有 $ 更改为 jQuery：
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:
最后，正如另一个答案中所建议的，最好将整个代码块包装在 $(document).ready 或类似的文件中。一个工作片段是：
$ = 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 #mastheadhas no content, so you won't actually see it doing anything.
然而，我在你的网站上试过这个，不管是什么.home #masthead都没有内容，所以你实际上不会看到它做任何事情。
