Question

有关此网站的其他问题： mobiliteitsvisie 滚动浏览网站时，菜单项应随其传递的每张幻灯片而变化。此时，即使滚动到多个幻灯片，也会突出显示最后一次单击的菜单项。是否有一种简单的方法可以在CSS中使用它？或者只能通过在JavaScript中添加几行或创建一个全新的jQuery.nav.js并在index.html中添加一个链接来实现这一目标？

Answer 1

您可以添加类似的内容，为每个导航锚添加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");
                }

            });
});

Answer 2

由于您似乎刚刚开始，我建议您使用像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

Parallax One Page网站菜单栏

2 个答案: