时间戳

首页 > 解决方案 > jQuery(文档).ready(函数(){}); 不能正常工作

javascript - jQuery(文档).ready(函数(){}); 不能正常工作

问题描述

在 main.js

jQuery(document).ready(function(){
    "use strict"
    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if(top>=60){
            $("nav").addClass('secondary');
        }
        else{
            if($("nav").hasClass('secondary')){
                $("nav").removeClass('secondary');
            }
        }
    });

});

在 index.html 中

<head>
<link rel="stylesheet" href="css/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<script type="text/javascript" src="js/main.js"></script>

<head>

在 style.css

.secondary{
    background-color:#34495e;
}

当页面向下滚动时，它是用于将具有类 'nav' 的导航栏的类更改为类 'secondary' 的代码

    $(window).scroll(function(){
        var top = $(window).scrollTop();
        if(top>=60){
            $("nav").addClass('secondary');
        }
        else{
            if($("nav").hasClass('secondary')){
                $("nav").removeClass('secondary');
            }
        }
    });

上面的代码在里面不能正常工作

jQuery(document).ready(function(){});

但，

jQuery(document).ready(function(){
        "use strict"
        alert("hello world");
});

工作正常，其他一些功能也工作正常

但有些功能不起作用。

谁能帮我找到这个问题的解决方案

标签： javascriptjqueryfunction

解决方案

你的代码是正确的。检查 with 的值top以console.log确保触发滚动事件。否则，您会发现有关代码其他部分的错误。

例如，这是可行的，并且也进行了轻微优化：

$(document).ready(function() {
  "use strict";

  var $win = $(window)
  var $nav = $("nav");

  $win.scroll(function() {
    var top = $win.scrollTop();

    console.log(top);

    if (top >= 60) {
      $nav.addClass("secondary");
    } else if ($nav.hasClass("secondary")) {
      $nav.removeClass("secondary");
    }
  });
});

演示：https ://codepen.io/taseenb/pen/QWbxRvP

推荐阅读