Question

当我在html文档中的<script></script>之间粘贴以下脚本时，它可以正常工作。

但是，当我通过<script src="example.js></script>加载它时，它只会部分运行（第一部分运行但第二部分不运行）。

以下是代码：

//SMOOTH SCROLL
  $(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
// End of SMOOTH SCROLL

//NAV ENLARGE
$(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
    if (scrollTop > 1) {
      $('#main-navigation').stop().animate({height: "10vh"},100);
      $("#main-navigation").css("position", "fixed");
      $("#main-navigation").css("top", "0");
      $('#main-navigation').css("width", "100vw");
    }
    else {
      $('#main-navigation').stop().animate({height: "100vh"},100);  
      $("#main-navigation").css("position", "static");
    }
});
//End NAV ENLGAR

Answer 1

$(function(){
  //this function gets called on pageload
});

只要加载页面，就会调用上述函数。你在上面的函数之外编写了你的onscroll方法，因此它没有被调用。如果您在html中的<script>标记下编写代码，它将自动在页面加载时运行，但js的情况不同。

    //SMOOTH SCROLL
      $(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
    //disable_scroll();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
    //enable_scroll();
            return false;
          }
        }
      });

$(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
    if (scrollTop > 1) {
      $('#main-navigation').stop().animate({height: "10vh"},100);
      //$('html, body').animate({scrollTop: $("#main-navigation").offset().top}, 2000);
      $("#main-navigation").css("position", "fixed");
      $("#main-navigation").css("top", "0");
      $('#main-navigation').css("width", "100vw");
    }
    else {
      $('#main-navigation').stop().animate({height: "100vh"},100);  
      $("#main-navigation").css("position", "static");
    }
});    

    });

Answer 2

将jQuery和外部example.js放在 head

中

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/example.js"></script>
</head>

Example.js

$(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

            if (target.length) {
                $('html, body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });

    $(window).on('scroll', function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 1) {
            $('#main-navigation').stop().animate({height: "10vh"},100);
            $("#main-navigation").css("position", "fixed");
            $("#main-navigation").css("top", "0");
            $('#main-navigation').css("width", "100vw");
        }
        else {
            $('#main-navigation').stop().animate({height: "100vh"},100);  
            $("#main-navigation").css("position", "static");
        }
    });
});

jQuery / js在内部工作，但不在外部工作

2 个答案: