導航欄不起作用

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感到羞恥），然后將當前滾動高度與每個偏移量進行比較，以確定您滾動到了哪個部分。