Scrollspy效果停止工作 [英] Scrollspy effect stopped working

问题描述

滚动效果工作正常，但突然停止工作。我的意思是当滚动onepage站点时，当href链接被赋予像这样的href =＃id时，菜单的活动元素被识别。但是当像/ home＃id那样给出href时，它停止工作。我想这样使用它。由于该网站使用通用导航。

这是我的代码：

$ p $ /缓存选择器
var lastId，
topMenu = $（＃timenav），
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），
offsetTop = href ===＃？0：$（href）.offset（）。top-topMenuHeight + 1;
$（' （）;
}，300）;
e.preventDefault（）;
}）;

//绑定滚动
$（window）.scroll（function（）{
//获取容器滚动位置
var fromTop = $（this）。 scrollTop（）+ topMenuHeight;

//获取当前滚动项的标识
var cur = scrollItems.map（function（）{
if（$（this）.offset（ ）.top< fromTop）
return this;
}）;
//获取当前元素的id
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）;
}
}）;


有人可以帮我解决这个问题

http://www.drkeenly.com/

这是一个小提琴

http://jsfiddle.net/ aGjTV /

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

/ code>在你的代码中产生问题，因为当你写 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 ）; 
  

小提琴只有foo给出href =/ home＃foo

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

 < a href =＃top>页首< / a> 
。 
。 
。 
< a id =top>顶部< / a> 
  

The scrollspy effect was working fine, but suddenly it stopped working. I mean the active element of the menu is identified while scrolling the onepage site, when the href links are given as like this href="#id". But It stops working when href is given like "/home#id". I want to use it like this. Since the site uses a common navigation.
This is my code:

 / 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");
   }                   
});

can someone help me with this

http://www.drkeenly.com/

Here is a Fiddle

http://jsfiddle.net/aGjTV/

Any help would be great. Thanks in advance !

解决方案

var item = $($(this).attr("href")); in your code was creating problem because when you write href="#id" it is var item = $(#id); but when you write href="/home#id" it becomes var item = $(/home#id); which is incorrect.I fixed it:

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; }
});

---

Another change filter("[href*=#"+id+"]") which will check for string #id within href even in href contains any text before #:

Edited line:

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

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

Note : the above fiddle will require a text along with # for Top href also.Otherwise it will set .active to all menu items:

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

这篇关于Scrollspy效果停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！