Preface: In the project, you can implement a simple up and down parallax scrolling, that is, when the page slides to a fixed position, the upper and lower pages will have an overlay effect, and when it is restored, expand and restore.
Functional technology implementation method: element positioning, mouse event
Idea 1:
At the beginning, I thought about setting the scrollbar listening event, and when I reached a fixed position, the lower element sets a relative attribute (this can ensure that it does not change its original style and can adjust the element position), so the code was born:
<!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."></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var scrollTop=$(window).scrollTop();
//$(window).scrollTop() method is the distance of the scroll bar scrolling //$(window).height() gets the height of the current form //$(document).height() gets the height of the current document $('.div2').css('top',-scrollTop);
});
});
</script>
</html>
Problem: Run the above code and you will find that there is an obvious bug. Although the general function has been implemented, the relative element will still occupy its original position no matter how it moves. However, our expectation is that the scroll bar should not slide when it reaches the bottom of the element below. How to solve it?
Idea 2:
I thought for a long time, but still didn't find that the elements can neither occupy a position nor change their own styles. So I boldly gave up relative and chose absolute positioning. This requires us to adjust the styles ourselves. The specific code is as follows:
<!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."></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 () { //I am used to writing this $(window).scroll(function () {
var scrollTop=$(window).scrollTop();
var objHeight=objOffset-scrollTop;
(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>
Note: ① The position of the element in the upper half needs to be kept still ② The lower half ensures that the level is higher than the upper half ③ This code is aimed at the upper half. If you want it to move, you need to ensure that the scrolling speed of the lower half is greater than the upper half.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.