溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言： 項目中讓實現一個簡單的上下視差滾動，就是當頁面滑動到某一固定位置時，讓上下兩頁面出現疊加效果，恢復時，展開恢復。
功能技術實現方式：元素定位，鼠標事件
思路1：
一開始想著設置滾動條監聽事件，當到固定位置時下方元素設置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：
我思考了良久，但是仍然沒發現可以讓元素既不占位置，又不改變自身樣式，所以我大膽放棄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>
注意：①上半部分元素的位置需要保持不動②下半部分確保層級要高于上半部分③本代碼針對的是上半部分固定，如果想讓其跟著動，需要確保下半部分滾動速度要大于上半部分
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
