代码之家  ›  专栏  ›  技术社区  ›  Chris Hitchcock

滚动时绑定事件未应用活动

css3 html5 jquery
  •  0
  • Chris Hitchcock  · 技术社区  · 7 年前

    我找到了这个问题的解决办法 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>
    1 回复  |  直到 7 年前
        1
  •  1
  •   Hikarunomemory Bhavana    7 年前

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

    所以你应该使用完整的版本。

    jquery2.2.1和jquery3.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

    您将看到jquery3.3.1出现错误。 

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

    1) 使用jquery2.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>

    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>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号