我正在构建单页设计网站,并想知道如何在滚动浏览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);
你试过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