导航栏不起作用

Question

我正在做一个类似于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 -->'

Answer 1

查看您提供的第二个链接的来源（ 此处 ），您可以看到对<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();
});

这段代码要做的是获取每个部分的偏移量（而不是将它们存储在范围更大的var中（它们对：P感到羞耻），然后将当前滚动高度与每个偏移量进行比较，以确定您滚动到了哪个部分。