有关此网站的其他问题: mobiliteitsvisie 滚动浏览网站时,菜单项应随其传递的每张幻灯片而变化。此时,即使滚动到多个幻灯片,也会突出显示最后一次单击的菜单项。是否有一种简单的方法可以在CSS中使用它?或者只能通过在JavaScript中添加几行或创建一个全新的jQuery.nav.js并在index.html中添加一个链接来实现这一目标?
答案 0 :(得分:0)
您可以添加类似的内容,为每个导航锚添加data-scroll
,为每个幻灯片添加data-anchor
,即
HTML:
<a href="#" data-scroll=slide1>
<a href="#" data-scroll=slide2>
.
.
.
<div id="slide1" data-anchor=slide1>
<div id="slide2" data-anchor=slide2>
.
.
.
SCRIPT:
window.addEventListener( 'scroll', function() {
var scrollPos = $(this).scrollTop();
$("div[data-anchor^=slide]").each(function(i) {
var currentArticle = $(this).attr('data-anchor');
if ($(this).position().top <= scrollPos + 60 ) {
$('#nav a').removeClass('active');
$('#nav a[data-scroll="'+currentArticle+'"]').addClass("active");
}
});
});
答案 1 :(得分:0)
由于您似乎刚刚开始,我建议您使用像waypoints.js
这样的JavaScript插件。
此链接有一个很好的教程:http://www.oxygenna.com/tutorials/scroll-animations-using-waypoints-js-animate-css。
这是另一个关于你想要实现的目标的教程:http://webdesign.tutsplus.com/articles/create-a-sticky-navigation-header-using-jquery-waypoints--webdesign-6408