导航栏不能正常工作

问题描述：

我在做一个类似于http://www.apple.com/mac-pro/的滚动水平网站（它们似乎改变了它），但我的是水平的。但是，我遇到了6个白色导航栏未点亮且与正在导航的页面相对应的问题。我的代码如下。提前致谢！这里是一个例子http://jackyeu.com/sp3beta/我正在尝试做右侧的导航圈。导航栏不能正常工作

$(function(){ 
    var _left = $(window).scrollLeft(); 
    var individualDivWidth = 1024; 

    $(window).scroll(function(){ 
     var _cur_left = $(window).scrollLeft(); 
     var totalWidth = $('#container').width(); 
     var posToScroll = Math.round(_cur_left/individualDivWidth) * individualDivWidth; 

     TweenMax.to($('html, body'), 0.5, {scrollLeft: posToScroll, overwrite:true}); 


if ($(window).scrollLeft() >= $('#index_container').width()) 
{ 
     $(".b1").css({ background: "#569EB2"}); 
     $(".b2").css({ background: "#FFF"}); 
     $(".b3").css({ background: "#FFF"}); 
     $(".b4").css({ background: "#FFF"}); 
     $(".b5").css({ background: "#FFF"}); 
     $(".b6").css({ background: "#FFF"}); 
} 

if ($(window).scrollLeft() > = $('#page1_container').width()) 
{ 
     $(".b1").css({ background: "#FFF"}); 
     $(".b2").css({ background: "#569EB2"}); 
     $(".b3").css({ background: "#FFF"}); 
     $(".b4").css({ background: "#FFF"}); 
     $(".b5").css({ background: "#FFF"}); 
     $(".b6").css({ background: "#FFF"}); 
} 


    });<!-- end of scroll funcion -->'

很难看到你正在尝试做什么，因为参考站点不再存在。请添加一个完整的工作示例，以便我们可以更轻松地帮助您。 – Asken

我已经添加了一个例子。 – suckms

答

寻找在您提供的第二链路的源（here），你可以看到<script src="js/parallax.js"></script>

基准有了这个代码：

/* Set navigation dots to an active state as the user scrolls */ 
function redrawDotNav(){ 
    var section1Top = 0; 
    // The top of each section is offset by half the distance to the previous section. 
    var section2Top = $('#shoe-kits').offset().top - (($('#details').offset().top - $('#shoe-kits').offset().top)/2); 
    var section3Top = $('#details').offset().top - (($('#about').offset().top - $('#details').offset().top)/2); 
    var section4Top = $('#about').offset().top - (($(document).height() - $('#about').offset().top)/2);; 
    $('nav#primary a').removeClass('active'); 
    if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){ 
    $('nav#primary a.campaign-banner').addClass('active'); 
    } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){ 
    $('nav#primary a.shoe-kits').addClass('active'); 
    } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){ 
    $('nav#primary a.details').addClass('active'); 
    } else if ($(document).scrollTop() >= section4Top){ 
    $('nav#primary a.about').addClass('active'); 
    } 
}

这势必窗口滚动事件在这个文件的顶部像这样：

/* Scroll event handler */ 
$(window).bind('scroll',function(e){ 
    redrawDotNav(); 
});

Wh在这段代码中做的是获取每个部分的偏移量（而不是将这些偏移量存储在一个更高范围的var中（对他们不感兴趣：P），然后将当前的滚动高度与每个部分进行比较，以确定哪个部分已经滚动到。

导航栏不能正常工作

相关推荐