我正在处理水平视差。在我的横向网页上,我有几个div,我在图片上应用了视差效果。实际上,如果我用水平滚动滚动,视差似乎有效。我的问题是,当我点击项目菜单时,视差似乎无法正常工作。 你知道我应该修改什么吗? 这是我的小提琴: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
});
});
答案 0 :(得分:1)
您需要在导航上设置z-index。
这样的事情:
#banner {z-index: 10}
应该这样做。
祝你好运!