2021-11-09

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

<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>