Question

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

 / 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为某事或null。如果它为null，那么你不能像它和数组一样索引它，或者就此而言，用cur.length获取它的长度。

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

中

if (cur) {
...
}

Answer 2

如果你愿意，我只是写了一个自定义的滚动间谍脚本。

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

不再需要scrollspy插件，你只需要在下面添加;

1）target到您的导航链接。

2）与您的DIV和class相同id：与导航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; }
});

另一个更改过滤器（“[href * =＃”+ id +“]”），即使在href中也会检查href中的字符串#id包含之前的任何文本＃：

编辑行：

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

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

注意：上面的小提琴也需要一个文本和＃for Top href。否则它会将.active设置为所有菜单项：

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

Scrollspy效果停止工作

3 个答案:

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

HTML

JQUERY

CSS

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