我写了一个简短的代码，该代码添加了一类，并将一类从中殿菜单中的DIV中删除。＆amp;它在Google Chrome＆amp;没有erros。
jQuery(function ($)
{
$(window).scroll(function ()
{
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll == 500)
{
//ADDS THE CLASS
document.getElementById("main-header-container").className += " opened";
document.getElementById("nav_toggle_button").className += " nav-close";
document.getElementById("main-nav-container").className += " active";
console.log("Nav Open");
}
else if (scroll <= 400)
{
//REMOVES THE CLASS
$("#main-header-container").removeClass("opened");
$("#nav_toggle_button").removeClass("nav-close");
$("#main-nav-container").removeClass("active");
console.log("Nav Close");
}
});
);
});
浏览器不起作用＆amp;Verison：
环境：WordPress网站。
我的IE版本：11.447.14393.0
我的Firefox版本：50.0.2
我的Google Chrome版本：54.0.2840.99
我的Safari版本：Microsoft Edge
我在其他Broswers上注意到的东西：
- Nav Close正在记录＆amp;当滚动点达到400时，它正在工作。
- 什么也没有发生，也没有关于nav的日志。
只是知道我在这里做错了什么：（
它已经解决并编写了差异逻辑，这对我来说更好：）
<script type="text/javascript">
jQuery(function($){
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
//IF SCROLL > 0
if ( $("#main-header-container").hasClass( "opened" ) ) {
//DO NOTHING IF THE CLASS IS ALREADY THERE
}else{
$("#main-header-container").addClass("opened");
$("#nav_toggle_button").addClass("nav-close");
$("#main-nav-container").addClass("active");
console.log("Nav Open");
}
}else if(scroll <= 200){
$("#main-header-container").removeClass("opened");
$("#nav_toggle_button").removeClass("nav-close");
$("#main-nav-container").removeClass("active");
console.log("Nav Close");
} //END OF IF SCROLL > 0
});
});
</script>
您的代码中有流浪 );之后的滚动侦听器
else if (scroll <= 400)
{
//REMOVES THE CLASS
$("#main-header-container").removeClass("opened");
$("#nav_toggle_button").removeClass("nav-close");
$("#main-nav-container").removeClass("active");
console.log("Nav Close");
}
});
); <------
另外，WP中的jQuery以无冲突模式加载。您应该像这样包装代码：
jQuery(document).ready(function ($)
{
//your code
)}
正确代码
jQuery(document).ready(function ($)
{
$(window).scroll(function ()
{
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll == 500)
{
//ADDS THE CLASS
document.getElementById("main-header-container").className += " opened";
document.getElementById("nav_toggle_button").className += " nav-close";
document.getElementById("main-nav-container").className += " active";
console.log("Nav Open");
}
else if (scroll <= 400)
{
//REMOVES THE CLASS
$("#main-header-container").removeClass("opened");
$("#nav_toggle_button").removeClass("nav-close");
$("#main-nav-container").removeClass("active");
console.log("Nav Close");
}
});
});
不是，您的状况似乎有些怪异。
嗡嗡声，我很好奇为什么Chrome更宽容。您确实有错误，因为脚本的第二行中有额外的);。查看Chrome中的开发人员工具并查看控制台中的错误。
另外，当它完全等于500时，您还有一个很小的窗口可以捕捉窗口滚动。这可能是有问题的。
代码建议
您正在混合JavaScript和jQuery。让我们标准化jQuery的可读性。我认为您会发现也更容易阅读和使用。
让我们使用jQuery添加和删除类属性。以下代码：
- 使用jQuery的
.addClass()和.removeClass() - 将DOM查找到变量中
- 它等到文档准备就绪。
这是您的脚本：
(function($, window, document){
"use strict";
var $headerContainer, $navToggle, $mainNav;
var init = function() {
$headerContainer = $("#main-header-container");
$navToggle = $("#nav_toggle_button");
$mainNav = $("#main-nav-container");
$(window).scroll(navHandler);
}
var navHandler = function() {
var scroll = $(this).scrollTop();
if (scroll >= 500) {
$headerContainer.addClass("opened");
$navToggle.addClass("nav-close");
$mainNav.addClass("active");
console.log("Nav Open");
} else if (scroll <= 400) {
$headerContainer.removeClass("opened");
$navToggle.removeClass("nav-close");
$mainNav.removeClass("active");
console.log("Nav Close");
}
}
$(document).ready(function(){
init();
});
}(jQuery, window, document));
这也是JSfiddle上的一个工作演示。HTML和CSS只是虚拟占位符，可以向您展示脚本的工作。当您向下滚动阈值时，标题容器背景将绿色作为视觉指示。
jquery（function（$）
您正在尝试获得$作为参数，但您不会发送此参数。因此，我建议可以在函数内部创建一些local变量$，并具有不确定的
的值尝试制作
(function($){
$(function(){
$(window).scroll(function (){
......
});
});
}(jQuery)
您是否有可以用来测试的代码的小提琴？
我还注意到JavaScript className方法与jQuery removeclass One之间的混合在一起，为什么不使用一个？
这是与jQuery一起，您可以尝试一下，但是用小提琴调试会更简单。
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// >=, not <=
if(scroll == 500) {
// ADD THE CLASS
$("#main-header-container").addClass("opened");
$("#nav_toggle_button").addClass("nav-close");
$("#main-nav-container").addClass("active");
console.log("Nav Open");
} else if(scroll <= 400) {
// REMOVE THE CLASS
$("#main-header-container").removeClass("opened");
$("#nav_toggle_button").removeClass("nav-close");
$("#main-nav-container").removeClass("active");
console.log("Nav Close");
}
});
});
我要在这里咬人；猜猜您的意图并建议您使用此替代代码。
我的猜测：如果少于或等于400不使用类（删除），如果更多，请使用类（添加）。
(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var isNotLess = (scroll > 400);
$("#main-header-container").toggleClass("opened",isNotLess);
$("#nav_toggle_button").toggleClass("nav-close",isNotLess);
$("#main-nav-container").toggleClass("active",isNotLess);
});
})(jQuery);// pass jQuery to the anonymous function
注意，直接回答您的问题；底线是您的原始代码有语法错误，有些浏览器似乎可以更好地处理它。