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

查看您提供的第二个链接的来源（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();
});

这段代码正在做的是获取每个部分的偏移量（而不是将它们存储在一些具有更高范围的var中（对它们感到羞耻：P）然后将当前滚动高度与每个部分进行比较以找出你的哪个部分滚动到了。

导航栏不起作用

1 个答案: