0

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

1 回答 1

0

查看您提供的第二个链接的来源（此处），您可以看到对<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）然后将当前滚动高度与每个部分进行比较以找出您滚动到的部分.

于 2013-08-27T05:24:19.697 回答