滚动事件绑定无效

Question

我找到了这个问题的解决方法Here on Stack Overflow，我一直在尝试使用他们的解决方案来复制它，以解决自己的网站问题。我还经历了其他一些堆栈溢出以及试图找出我所缺少的东西。我仍在学习jQuery和Javascript，因此我假设有一些明显的东西让我忘记了从给定的原始解决方案进行更改。为方便起见，我也在codepen中重新创建了此代码。 Codepen。希望你们能帮助我弄清楚我在这里做错了什么，尝试了几个小时，我很茫然。预先谢谢你！

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});

body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#web {
    position: absolute;
    top: 400px;
}

#seo {
    position: absolute;
    top: 800px;
}

#recent {
    position: absolute;
    top: 1200px;
}

#about {
    position: absolute;
    top: 1600px;
}

#contact {
    position: absolute;
    top: 2000px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <a class="navbar-brand" href="#">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>

Answer 1

slim版本的jQuery不包含所有原始jQuery函数。

所以您应该使用完整版本。

jQuery 2.2.1和jQuery 3.3.1之间在选择元素方面存在一些差异。

这是一个简单的测试：

使用jQuery 2.2.1

$("#")

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

使用jQuery 3.3.1

您将看到jQuery 3.3.1发生错误。

$("#")

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

要解决您的问题，有两种选择。

1）使用jQuery 2.2.1，无需进行任何代码更改

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});

body {
    height: 6000px;
    font-family: Helvetica, Arial;
}

#web {
    position: absolute;
    top: 400px;
}

#seo {
    position: absolute;
    top: 800px;
}

#recent {
    position: absolute;
    top: 1200px;
}

#about {
    position: absolute;
    top: 1600px;
}

#contact {
    position: absolute;
    top: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <a class="navbar-brand" href="#">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>

2）使用jQuery 3.3.1并通过将unrecognized expression: #替换为"#"来解决"#home"错误

var lastId,
  topMenu = $("#top-menu"),
  topMenuHeight = topMenu.outerHeight() + 15,
  menuItems = topMenu.find("a"),
  scrollItems = menuItems.map(function() {
    var item = $($(this).attr("href"));
    if (item.length) {
      return item;
    }
  });

menuItems.click(function(e) {
  var href = $(this).attr("href"),
    // replace "#" with "#home"
    offsetTop = href === "#home" ? 0 : $(href).offset().top - topMenuHeight + 1;
  $('html, body').stop().animate({
    scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});


$(window).scroll(function() {
  var fromTop = $(this).scrollTop() + topMenuHeight;
  var cur = scrollItems.map(function() {
    if ($(this).offset().top < fromTop)
      return this;
  });
  cur = cur[cur.length - 1];
  var id = cur && cur.length ? cur[0].id : "";

  if (lastId !== id) {
    lastId = id;
    menuItems
      .parent().removeClass("active")
      .end().filter("[href='#" + id + "']").parent().addClass("active");
  }
});

body {
  height: 6000px;
  font-family: Helvetica, Arial;
}

#web {
  position: absolute;
  top: 400px;
}

#seo {
  position: absolute;
  top: 800px;
}

#recent {
  position: absolute;
  top: 1200px;
}

#about {
  position: absolute;
  top: 1600px;
}

#contact {
  position: absolute;
  top: 2000px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="sticky-top navbar navbar-expand-lg navbar-light bg-myColor">
  <!-- add id="home" and replace "#" with "#home" -->
  <a class="navbar-brand" href="#home" id="home">
    <img src="image/VC-Logo.png" alt="Visionary Creatives logo" height="150px;" />
  </a>
  <button class="navbar-toggler navbar-brand" type="button" data-toggle="collapse" data-target="#navToggle" aria-controls="navToggle" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navToggle">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    </ul>
    <ul class="navbar-nav" id="top-menu">
      <li class="nav-item">
        <!-- replace "#" with "#home" -->
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#web">Web &amp; Graphics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#seo">SEO &amp; Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#recent">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

<a id="web">Web</a>


<a id="seo">SEO</a>


<a id="recent">recent</a>

<a id="about">about</a>

<a id="contact">contact</a>