Parallax One Page网站菜单栏

时间:2014-09-21 05:35:56

标签: jquery css parallax

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

2 个答案:

答案 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