本文详解如何在项目中实现简单的上下视差滚动效果。首先分析使用Relative定位时元素仍占位导致的滚动异常问题，随后提出基于Absolute定位的解决方案。通过动态调整元素位置与层级，实现页面滑动时的叠加与展开效果，并提供了完整的HTML、CSS及JS代码示例供参考。
视差滚动效果概述
前言：在开发过程中，有时需要实现一个简单的上下视差滚动效果。具体表现为当页面滚动到特定固定位置时，上下两个页面区域产生叠加视觉效果；当滚动恢复时，叠加效果消失，页面展开恢复正常状态。
实现该功能主要依赖的技术点包括元素定位方式的选择以及鼠标滚动事件的处理。
思路1：
方案一：Relative定位尝试
最初的设想是监听滚动条事件，当滚动到达指定固定位置时，将下方元素的CSS定位属性设置为relative。这样做的目的是在保持元素原有样式不变的前提下，实现元素位置的调整。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.div1{
width: 100%;
height: 500px;
background: #FF0000;
position: fixed;
top: 0;
left: 0;
}
.div2{
width: 100%;
margin-top: 500px;
height: 1000px;
background: #22B0FC;
position: relative;
z-index: 2;;
}
</style>
<body>
<div class="div1">1111111</div>
<div class="div2">22222222222222</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var scrollTop=$(window).scrollTop();
//$(window).scrollTop()这个方法是当前滚动条滚动的距离
//$(window).height()获取当前窗体的高度
//$(document).height()获取当前文档的高度
$('.div2').css('top',-scrollTop);
});
});
</script>
</html>
问题：运行上述代码后，会发现一个明显的Bug。虽然大体功能已实现，但由于使用relative定位的元素无论位置如何移动，始终会占据文档流中的原始位置。而我们的期望是，当滚动条到达使下方元素底部对齐的位置时，下方元素不应继续随滚动条滑动。那么，如何解决这个问题呢？
思路2：
方案二：Absolute定位优化
经过深入思考，发现难以找到一种既能不占位又不改变自身样式的定位方式。因此，果断放弃relative定位，转而选择absolute定位。这种方式需要我们手动调整相关样式，具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.div1{
width: 100%;
margin: 0 auto;
height: 500px;
background: bisque;
position: fixed;
top: 0;
left: 0;
}
.div1 div{
width: 1200px;
margin: 0 auto;
height: 500px;
background: #FF0000;
}
.div2{
width: 1200px;
margin: 0 auto;
height: 1500px;
background: #22B0FC;
z-index: 20000;;
margin-top: 500px;
}
</style>
<body>
<div class="div1 clearfix">
<div>111111111111111111111111111111111111111</div>
</div>
<div class="div2">22222222222222</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
var div2Height=Number($('.div2').offsetTop);
var clientHeight=Number($(document).clientHeight);
var totalHeight=div2Height-clientHeight;
var objOffset=$('.div2').offset().top;
var objOffsetLf=$('.div2').offset().left;
$(document).ready(function () { //本人习惯这样写了
$(window).scroll(function () {
var scrollTop=$(window).scrollTop();
var objHeight=objOffset-scrollTop;
console.log(scrollTop);
if(scrollTop>=0){
$('.div2').css({'left':objOffsetLf,'top':objHeight,'position':'absolute','margin-top':'0px'});
}else{
$('.div2').css({'position':'static','margin-top':'500px'});
}
});
});
</script>
</html>
注意：①上半部分元素的位置需要保持不动②下半部分确保层级要高于上半部分③本代码针对的是上半部分固定，如果想让其跟着动，需要确保下半部分滚动速度要大于上半部分
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。