使2 div向相反方向移动
我想，对我这个愚蠢的问题，我很抱歉。如果有人知道如何使div上下滚动，请帮助我：http://velvethammer.net/。
您可以在站点页脚附近看到，它有两个部分，每个部分包含两个图像(一个大一点，另一个小，一个在前面，另一个在后面)。我想知道我如何制作2个div，并使他们有一个向上和向下的动画一点(像视差)，当滚动时，网站上和下。
谢谢。
回答 2
Stack Overflow用户
发布于 2015-10-26 05:25:04
对于这样的问题，我看到的大多数解决方案都涉及到某种类型的JS，并倾听用户的滚动事件。
我使用JQuery编写了一个非常简单的示例。在这里，每当滚动发生时，javascript都会监听，并测量页面顶部被滚动到多远。然后，它获取这个值，并将每个图像的值乘以不同的值，并使用margin-top以不同的速率将图像向下推。
如果像你的例子一样，图片在页面的下方，我建议从一个与页面顶部不同的位置进行测量。JSfiddle这里：http://jsfiddle.net/3Lb054qn/
Stack Overflow用户
发布于 2015-10-26 06:03:18
您必须根据滚动更改css位置分布。所以你必须做如下的事情。在那个边距-顶部是第二个div标签的改变。Javascript代码如下所示。
<script type="text/javascript">
var lastScrollTop = 0;
$(window).bind('scroll',function(e){
var st = $(window).scrollTop();
var cs = $(this).scrollTop();
var wh = $( window ).height();
var dv1 = $('#div1').offset().top;
var dv2 = $('#div2').offset().top;
var visible_dv1= dv1 - wh;
//check wether div1 is in the viewport when scroll down
if(st > visible_dv1){
if(cs > lastScrollTop){
//if scroll down
$('#div2').css({
'margin-top': "-=3"
});
}else{
//if scroll up
$('#div2').css({
'margin-top': "+=3"
});
}
}else{
$('#div1').removeAttr('style');
$('#div2').removeAttr('style');
}
lastScrollTop = cs;
});
</script>html和css将如下所示。
<style>
.container{width:100%;}
.grid{font-size:22px; width:168px; height:168px; display:block; }
#div1{background:#C30;margin-top:1000px;float:none;position:relative;z-index:1000;}
#div2{background:#6C3;margin-top:-100px;margin-left:50px;float:none;}
</style>
</head>
<body>
<div class="container">
<div class="grid" id="div1">
div 1
</div>
<div class="grid" id="div2">
div 2
</div>
</div>
</body>https://stackoverflow.com/questions/33338193
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号