Scrollspy 效果停止工作

Question

scrollspy 效果很好，但突然停止工作。我的意思是在滚动单页站点时识别菜单的活动元素，当href链接给出这样的href =“#id”时。但是当像“/home#id”一样给出href时它会停止工作。我想像这样使用它。由于该网站使用通用导航。
这是我的代码：

 / Cache selectors
var lastId,
    topMenu = $("#timenav"),
    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");
   }                   
});

谁能帮我解决这个问题

http://www.drkeenly.com/

这是一个小提琴

http://jsfiddle.net/aGjTV/

任何帮助都会很棒。提前致谢 ！

Answer 1

var cur = scrollItems!=null?scrollItems.map(...):null;

在这一行之后 cur 要么是某事要么为空。 如果它是空的，那么你不能像和数组一样索引它，或者用 cur.length 来获取它的长度。

你没有指定错误，但我敢打赌它说“TypeError：cur is null”。 解决方案取决于您实际希望代码做什么，但我建议将函数的其余部分包装在

if (cur) {
...
}

Answer 2

如果您愿意，我刚刚编写了一个自定义滚动间谍脚本。

查看演示http://jsfiddle.net/yeyene/L4Gpq/

不再需要scrollspy插件，只需要在下面添加即可；

1) target 到您的导航链接。

2) 与您的 DIV 和 id 相同的 class：与您的导航的 target 相同。

HTML

<nav>
    <ul>
        <li><a target="main">Home</a></li>
        <li><a target="story">Our Story</a></li>
        <li><a target="work">Our Work</a></li>
        <li><a target="our-news">Our News</a></li>
        <li><a target="contact">Contact Us</a></li>
    </ul>
</nav>
<div id="main" class="content">main</div>
<div id="story" class="content">story</div>
<div id="work" class="content">work</div>
<div id="our-news" class="content">our-news</div>
<div id="contact" class="content">contact</div>

JQUERY

$('nav li a').click(function () {
    var id = $(this).attr('target');
    $('html, body').stop().animate({
        scrollTop: $('#'+id).offset().top
    }, 500);
});

$(window).scroll(function() {   
    var myArray = new Array();
    $('div.content').each(function() {
        myArray.push($(this).offset().top);
    });
    for( var i=0; i<= myArray.length; i++){
        if($(this).scrollTop() >= myArray[i]){
            $('nav a').removeClass('active');
            $('nav a').eq(i).addClass('active');
        }
    }
});

CSS

li {
    float:left;
    margin-right:10px;
    list-style:none;
    text-decoration:none;
}
li a {
    cursor:pointer;
    text-decoration:none;
    z-index:11;
    padding:0 5px;
}
li a.active {
    background:red;
    color:#fff;
}
.content {
    float:left;
    width:90%;
    padding:45% 5%;
    background:#dfdfdf;
    margin-bottom:10px;
}
nav {
    position:fixed;
    width:100%;
    padding:0 0 10px 0;
    top:0;
    left:0;
    z-index:10;
    background:green;
}

Answer 3

var item = $($(this).attr("href")); 在您的代码中造成了问题，因为当您编写 href="#id" 时它是 var item = $(#id); 但是当您编写 href="/home#id" 它变成了var item = $(/home#id); 这是不正确的。我修复了它：

scrollItems = menuItems.map(function(){
  var indexItm = $(this).attr('href').indexOf('#');
  var str = $(this).attr('href').substring(indexItm);
  var item = $(str);
  if (item.length) { return item; }
});

---

另一个更改 filter("[href*=#"+id+"]") 将在 href 中检查字符串 #id，即使在 href 中包含 # 之前的任何文本：

编辑行：

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

Fiddle were only foo is given href="/home#foo"

注意：上面的小提琴还需要一个文本以及#作为Top href。否则它将设置.active到所有菜单项：

<a href="#top">Top</a>
. 
. 
. 
<a id="top">top</a>