Question

我编写了一个简短的代码，在nave菜单中添加了一个类并将类从DIV中删除。＆安培;它在谷歌浏览器中运行得非常好没有错误。

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; verisons：

环境：Wordpress网站。

我的IE版本：11.447.14393.0
我的Firefox版本：50.0.2
我的谷歌浏览器版本：54.0.2840.99
我的Safari版本：Microsoft Edge

我在其他broswers上注意到的事情：

Nav Close正在记录＆amp;当滚动点达到400时，它正在工作。
没有任何反应，没有关于导航打开的日志。

知道我在这里做错了什么：（

它已经解决并编写了一个差异逻辑，这对我来说效果更好：）

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

Answer 1

滚动侦听器

之后，您的代码中存在迷路);

    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");
        }
    });
});

方面没有，你的条件似乎有点奇怪tbh。

Answer 2

jQuery的（函数（$）

你试图把$作为参数，但你不发送这个论点。所以我建议在函数内部创建一些局部变量$，其值为undefined

尝试制作

(function($){
  $(function(){
   $(window).scroll(function (){
     ......
   });
  });
}(jQuery)

Answer 3

您是否可以使用我们可以用来测试的代码？

我还注意到javascript className方法和jQuery removeClass之间的混合，为什么不只使用一个？

这里有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");
        }
    });
});

Answer 4

我要咬这里;猜测你的意图并建议你使用这个备用代码。

我的猜测：如果小于或等于400，则不使用class（删除它），如果更多，请使用该类（添加它）。

(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

注意，直接回答你的问题;底线是你的原始代码有一个语法错误，一些浏览器似乎更好地处理它。

Answer 5

嗯，我很好奇为什么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脚本无法在IE / Safari / Firefox

5 个答案:

代码建议