在页面滚动时突出显示当前导航

Question

我试图通过添加活动类来突出显示页面滚动上的导航。

这是我的脚本（我从这里得到https://codepen.io/joxmar/pen/NqqMEg）：

// Cache selectors
var lastId,
 topMenu = $("#mainNav"),
 topMenuHeight = topMenu.outerHeight()+1,
 // 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
  }, 850);
  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");
   }                   
});

我在控制台中收到以下错误： 未捕获的错误：语法错误，无法识别的表达式：[href=#]

我正在使用 jquery-3.3.1.min.js

编辑：更新 - 我不再收到错误，但它不起作用。我在变量 formTop 上做一个控制台日志，我得到的是 NaN

Answer 1

你应该为你的 href 值加上引号。

您的代码：

("[href=#"+id+"]")

应该是：

("[href='#"+id+"']")

// Cache selectors
var lastId,
 topMenu = $("#mainNav"),
 topMenuHeight = topMenu.outerHeight()+1,
 // 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
  }, 850);
  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");
   }                   
});

nav {
  position: fixed;
  top: 0;
  left: 0;
  background: #55443D;
  height: 40px;
  width: 100%;
  z-index: 1;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: table;
  margin: 0 auto;
}
nav ul li {
  display: table-cell;
}
nav ul li a {
  padding: 10px 20px;
  display: block;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
nav ul li a:hover {
  color: #F38A8A;
}
nav ul .active a {
  color: #F38A8A;
  border-bottom: 3px solid #F38A8A;
}

section {
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 0;
}

#home {
  background: #A0CAB5;
  top: 40px;
}

#work {
  background: #CDE9CA;
}

#about {
  background: #F1EDD0;
}

#contact {
  background: #F38A8A;
}

h2 {
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul id="mainNav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>    
  </ul>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="work" data-sr><h2>Work</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>

Answer 2

codepen 的“笔”有这样的评论：

美丽。感谢您分享您的工作。为了避免与某些版本的jQuery冲突，最后一个字符串需要替换为：

.end().filter( '[href="#' + id + '"]' ).parent().addClass( "active" );

也许一些小空格，是你的回应！