需求：元素在页面指定区域滚动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap-box{
            width: 100%;
            height: 1600px;;
        }
        .inner-box{
            position: relative;
            width: 1200px;
            height: 800px;
            background: palegreen;
            margin: 0 auto;
        }
        .slider-box{
            position:absolute;
            left: 50%;
            top: 0; 
            margin-left: 320px;
            width:280px;
            height: 280px;
            background: palevioletred;
        }
</style>

<div class="wrap-box">
       <div class="inner-box">
            <div class="slider-box"></div>
       </div>
</div>

<script src="./js/jquery.js"></script>
<script>
        var innerBoxH = $('.inner-box').height();
        var sliderBoxH = $('.slider-box').height();
        var maxTransform =  innerBoxH - sliderBoxH;
        $(window).scroll(function(){
            var scrollHeight = document.documentElement.scrollTop;
            if( scrollHeight >= maxTransform){
                scrollHeight = maxTransform;
            }
            $(".slider-box").css({
                transform: 'translateY('+ scrollHeight +'px)'
            })
        });
</script>