更改页面滚动上的活动菜单项答案

【问题标题】：Change Active Menu item on page scroll更改页面滚动上的活动菜单项
【发布时间】：2013-02-16 11:51:46
【问题描述】：

我在一个单页 Wordpress 网站中使用了这个脚本的稍微修改过的版本： Change Active Menu Item on Page Scroll?

我改变的只是菜单 UL id、topMenuHeight 和滚动的持续时间。出于某种原因，前两个项目正在工作 - 从 about 滚动到 services 工作，但在那之后，什么也没有。我将“id”变量输出到控制台，它总是显示服务。不太清楚发生了什么。

http://inspirawebdesign.us/

【问题讨论】：

我知道这可能无法解决您的问题，但我认为您可能有一些与您的脚本冲突的 JS。如果您反转
链接，它就可以正常工作。 jsfiddle.net/GpjMc希望这会有所帮助。就我个人而言，我无法弄清楚是什么导致了这个问题。也许是 Qtip JS？

【解决方案1】：

我个人对必须更改菜单顺序的原因没有直接的答案，但如果你稍微改变 CSS 的设计方式，它可以解决你的问题。

如前所述，您需要确保所有“li”链接都按常规顺序列出。

从这一点开始，如果您修复了一些 CSS，您可以对其进行操作以使其看起来相同。

如果您将第 27-28 行更改为以下内容，则在您的 CSS 中：

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {float: left; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

基本上，不是将#menu-main-menu li 设置为向右浮动，而是将菜单更改为向右浮动，将菜单更改为向左浮动以使其设置为正确的顺序。

我添加的#menu-main-menu 内部

float:right;

在#menu-main-menu li 中，我将 float:right 更改为

float:left;

如果你想在这里看到代码，你可以去：http://jsfiddle.net/GpjMc/1/

你也可以让它显示 inline 而不是 float:left 。无论哪种格式最适合您。

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {display: inline; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

【讨论】：

【解决方案2】：

你可以使用 jQuery 航点

http://imakewebthings.com/jquery-waypoints/

然后在滚动到特定元素时使用 jquery 更改活动类

$('.thing').waypoint(function(direction) {
  jQuery("li.someItem").addClass("active");
});

【讨论】：

【解决方案3】：

你得到了带有列表项的导航菜单，你只需要给你的ul一个id（在这种情况下：top-menu）

在您的 html 中放置下一个代码：

<ul id="top-menu">  
                <li class="active"><a href="#">item1</li>
                <li class=""><a href="#">item2</li>
                <li class=""><a href="#">item3</li>
                <li class=""><a href="#">item4</li>
                <li class=""><a href="#">item5</li>
</ul>

在你的 jquery 文件中加入下一段代码：

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

就是这样。 topmenu var 中的 id 与您的 ul 中的 id 相同（在本例中为 #top-menu） topMenu = $("#top-menu")

【讨论】：