position:sticky It's CSS The new location attribute in 3.0 can be said to be a combination of relative location and fixed location. It is mainly used for monitoring scroll events. In short, in the rolling process, when the distance between an element and its parent element meets the requirements of sticky location, the effect will become fixed location and fixed to the appropriate location. Here is an effect.
The probability of using this attribute is relatively small, but it's really a good thing in a specific situation. You don't need to write that complicated JS. Here's the code implementation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0 Clever use of sticky positioning</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei ', sans-serif;
box-sizing: border-box;
}
.banner {
position: relative;
width: 100vw;
height: 100vh;
}
.banner img {
width: 100%;
height: 100%;
}
section:nth-child(2n+1) {
position: relative;
height: auto;
background: #fafafa;
display: flex;
flex-direction: row-reverse;
}
section:nth-child(2n+2) {
position: relative;
height: auto;
background: #fafafa;
display: flex;
}
section .img-box {
/* Key attributes */
position: sticky;
top: 0;
min-width: 50%;
height: 100vh;
}
section .img-box img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
}
section:nth-child(2n+1) .content {
padding: 100px 0 100px 100px;
text-align: right;
}
section:nth-child(2n+2) .content {
padding: 100px 100px 100px 0;
text-align: left;
}
section .content h2 {
margin: 0 0 20px;
font-size: 60px;
}
section .content p {
color: #777;
font-size: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="banner">
<img src="banner.png">
</div>
<div id="box">
<section>
<div class="img-box">
<img src="img.png">
</div>
<div class="content">
<h2>Apple Watch</h2>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
<p>
Apple Watch It's a smart Watch released by apple in September 2014. It can be divided into three types: sports, ordinary and customized. It uses a sapphire screen and has a variety of colors such as silver, gold, red, green and white
</p>
</div>
</section>
</div>
<script>
let box = document.getElementById('box');
for(let i=0;i<2;i++){
box.innerHTML +=box.innerHTML;
};
</script>
</body>
</html>Here are the images used in the above code.
img.png
banner.png
