javascript - 视差点击菜单项

Question

我正在研究水平视差。在我的水平网页上，我有几个 div，我在其中对图片应用了视差效果。实际上，如果我使用水平滚动条滚动，视差似乎起作用了。我的问题是，当我点击元素菜单时，视差似乎不起作用。你知道我应该修改什么吗？这是我的 fiddle :enter link description here

我的 javascript 测试:

    $(document).ready(function() {

       $("body").addClass("has-js");
        $("form").bind("submit",function(event){
           event.preventDefault();
        });
       $("#banner a").bind("click",function(event){
           event.preventDefault();
           var target = $(this).attr("href");
           $("html, body").stop().animate({
               scrollLeft: $(target).offset().left,
               scrollTop: $(target).offset().top
           }, 1200);
       });
    });

$(function(){
    /* main background image. moves against the direction of scroll*/
    $('.panel').scrollParallax({
        'speed': -0.2
    });

    /* inner items, moves slightly faster than the background */
    $('.panel .inner').scrollParallax({
        'speed': -0.5
    });

    /* two additional samples inside item2, both moving with direction of scroll*/
    $('.panel .inner-lev1').scrollParallax({
        'speed': 0.2
    }); 
    $('.panel .inner-lev2').scrollParallax({
        'speed': 0.5
    });
});

$("#banner a").bind("click",function(event){
           event.preventDefault();
           var target = $(this).attr("href");
$('.panel .inner-lev1').scrollParallax({
        'speed': 0.2
    });            
       });

Answer 1

您需要在导航上设置一个 z-index。

是这样的:

#banner {z-index: 10}

应该可以解决问题。

祝你好运!