简单的动态堆叠效果

2020-08-13

效果

https://github.com/liceal/Stacked-demo

坑

图片不能藏在下一个dom下面，需要将下一个dom绝对定位然后设置z-index

所以在图片外，包一层div，绝对定位，然后不设置top和left，这样默认是原来的位置

如果怕乱，可以在绝对定位的dom的上一级position:relative

HTML

<div class="container">
    <div class="part1 part-common">
        <img src="./cat1.png"></img>
    </div>
</div>
<div class="container">
    <div class="part2 part-common">
        <img src="./cat2.png"></img>
    </div>
</div>
<div class="container">
    <div class="part3 part-common">
        <img src="./cat3.png"></img>
    </div>
</div>
<div class="container">
    <div class="part4 part-common">
        <img src="./timg.gif">
    </div>
</div>

CSS

html,body{
    margin: 0px;
    padding: 0px;
}
.container{
    width: 100%;
    height: 100vh;
}
.part-common{
    height: 100vh;
    width: 100%;
    position: absolute;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.part1{
    background-color: thistle;
    z-index: 0;
}
.part2{
    background-color: wheat;
    z-index: 1;
}
.part3{
    background-color: tomato;
    z-index: 2;
}
.part4{
    background-color: red;
    z-index: 3;
}
img{
    width: 500px;
    margin: auto;
}

js

var imgs = document.getElementsByTagName('img')
var containers = document.getElementsByClassName('container')

window.addEventListener('scroll', dynamic_bounding)

function dynamic_bounding(){
    for (let i = 0; i < imgs.length; i++) {
        let imgBounding = imgs[i].getBoundingClientRect()
        let containerBounding = containers[i].getBoundingClientRect()
        // 图片外容器可视距离一半加上图片的一半距离正好到图片的顶端，这个位置超过则固定，否则取消
        if (containerBounding.height + containerBounding.top - (imgBounding.height / 2) >= containerBounding.height / 2) {
            console.log('取消固定');
            imgs[i].style.position = ""
            imgs[i].style.top = ""
            imgs[i].style.left = ""
            // 取消固定图片
        } else {
            // 固定图片
            console.log('固定图片');
            imgs[i].style.position = 'fixed'
            imgs[i].style.top = '0px'
            imgs[i].style.left = (document.body.clientWidth - imgBounding.width) / 2 + 'px'
        }
    }
}

还有一个方便的方法，使用position:fixed固定