Fatal编程技术网
  • javascript/
  • Javascript jQuery/js可以在内部工作，但不能在外部工作

Javascript jQuery/js可以在内部工作，但不能在外部工作

javascript jquery html

Javascript jQuery/js可以在内部工作，但不能在外部工作,javascript,jquery,html,Javascript,Jquery,Html,当我在html文档中的之间粘贴以下脚本时，效果很好 但是，当我通过 只要加载页面，就会调用上述函数。您在上述函数之外编写了onscroll方法，因此没有调用它。如果在html中的标记下编写代码，它将在页面加载时自动运行，但js的情况不同 //SMOOTH SCROLL $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.r

当我在html文档中的
之间粘贴以下脚本时，效果很好

但是，当我通过

只要加载页面，就会调用上述函数。您在上述函数之外编写了onscroll方法，因此没有调用它。如果在html中的
标记下编写代码，它将在页面加载时自动运行，但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");
    }
});    

    });



将jQuery和您的external example.js放入head


将onscroll声明放入$（函数（）{scope@JazzCat我不知道你的意思是什么？你能解释一下吗？我对js/jQuery很陌生，所以如果这是一个基本问题，请原谅我。请更清楚地说明你想要实现什么。我的意思是把$（window）.on（'scroll'，function（）{}放在$（function（）{scope}内@JazzCat您可以在此处查看工作演示注意：代码是内部的。我尝试将onscroll移动到函数内部，但仍然不起作用。@JazzCat这是您建议的代码修订的结果。请参阅我在原始文章末尾所做的编辑。在那里，您可以看到代码在外部的反应。@zakaiterYou's I将脚本包含在页面的段落中，这很奇怪。将它们放在声明中。我已将其插入头部。结果相同。

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



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

    });



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



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