将ID addClass滚动到导航菜单以更改类别

我正在构建单页设计网站，并想知道如何在滚动浏览ID时向导航菜单项添加课程。将ID addClass滚动到导航菜单以更改类别

我猜它会是这样的：

if at ID-X addClass .active to menuitem-y

在我的导航菜单我有价格的链接（链接www.example.com/#prices）。所以当我点击价格时，它会平滑滚动到ID #prices。

所以可能应该是这样的：

if "#prices" addClass(.active)->Menuitem-y

我猜？

**更新** 感谢DaniP我有一些代码在#prices到达时触发警报。

var target = $("#prices").offset().top; 
var interval = setInterval(function() { 
    if ($(window).scrollTop() >= target) { 
     alert("made it!"); 
     clearInterval(interval); 
    } 
}, 250);

我可以把CSS而不是警报？像#menuitem-y{color:#000;}

这个工程，但只有一个实例，什么是最好的方式将此应用到更多的菜单项？

var target = $("#prices").offset().top; 
var interval = setInterval(function() { 
    if ($(window).scrollTop() >= target) { 
     $("#menu-item-16 a").addClass("active-prices"); 
     clearInterval(interval); 
    } 
}, 250);

来源

2016-06-14 Steggie

你试过Bootstrap scrollspy了吗？ http://getbootstrap.com/javascript/#scrollspy –

我没有使用Bootstrap。我正在使用http://materializecss.com。它有一个滚动功能。 http://materializecss.com/scrollspy.html这可能会工作相同。我有一个去 – Steggie

你尝试过什么吗？至少搜索并尝试与您的代码http://stackoverflow.com/questions/7182342/how-to-detect-when-the-user-has-scrolled-to-a-certain-area-on-the-page-在你的头衔中使用-jqu – DaniP

我已经构建了一个jQuery插件，听起来像它会为你在这里做什么工作。

https://github.com/tferullo/eavesdrop

它增加了一个类到导航元素，因为它对应于视图中的元件。希望这可以帮助！

来源

2016-06-14 15:45:30 tfer77

编辑，对不起没有看到示例文件夹！谢谢！ – Steggie

感谢这个脚本确实做了我想要的。但现在我必须在我的代码中实现它。我发现你的脚本中有一个错误，在我下载的文件中说： '; function'在开始时应该是'！function'根据你的演示页面... – Steggie

很高兴它的工作。函数调用之前的分号是针对可能无法正确关闭的串联脚本和/或其他插件的安全网。 – tfer77

将ID addClass滚动到导航菜单以更改类别

回答

相关问题