web页面滚动到某个元素，某元素向上平移一段距离的实现

程序员文章站 2024-01-19 08:02:52

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .parent {
            margin: 900px auto 500px;
            width: 800px;
            height: 600px;
            position: relative;
            background-color: #00ac61;
        }

        .cell-box1,.cell-box2 {
            position: relative;
            top: 15px;
            width: 400px;
            height: 300px;
            opacity: 0;
            background-color: palevioletred;
        }
        .cell-box2{
            background-color: blue;
        }
    </style>
       
    <script src="./requirejs/js/jquery-3.3.1.min.js"></script>
</head>
<body>
 
   
<div class="parent">
    <div class="cell-box1">子元素1</div>
    <div class="cell-box2">子元素2</div>
</div>
<script>
    $(function () {
        $(window).scroll(function () {
            slideUp($(".cell-box1"));
            slideUp($(".cell-box2"));
        });
        function slideUp(obj) {
            var targetHeight = obj.offset().top;   //目标元素到顶部的距离
            var scrollTop = $(window).scrollTop(); //页面滚动的距离
            if (scrollTop > targetHeight - $(window).height() + 100) {
                obj.animate({top:0, opacity: 1, filter: 'Alpha(opacity=90)'}, 800);
            }
        };
    });
</script>
</body>
</html>

上一篇：原生JS简易轮播图+轮播动画（未完成，还在制作中）

下一篇：关于百度地图截图的问题。