js 상하 시차 스크롤 단순 구현 코드

앞에서 말 했 듯 이 프로젝트 에서 간단 한 상하 시차 스크롤 을 실현 하 는 것 은 페이지 가 특정한 위치 로 미 끄 러 질 때 상하 두 페이지 에 중첩 효 과 를 나타 내 고 회복 할 때 복 구 를 하 는 것 이다.
기능 기술 구현 방식:요소 포 지 셔 닝,마우스 이벤트
사고방식 1:
처음에 스크롤 바 감청 이 벤트 를 설정 하려 고 했 는데 고정된 위치 에 있 을 때 아래 요 소 는 relative 속성 을 설정 합 니 다.(이렇게 하면 원래 의 스타일 을 바 꾸 지 않 고 요소 의 위 치 를 조정 할 수 있 습 니 다)그래서 코드 가 탄생 했 습 니 다.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .div1{
      width: 100%;
      height: 500px;
      background: #FF0000;
      position: fixed;
      top: 0;
      left: 0;
    }
    .div2{
      width: 100%;
      margin-top: 500px;
      height: 1000px;
      background: #22B0FC;
      position: relative;
      z-index: 2;;
    }
  </style>
  <body>
    <div class="div1">1111111</div>
    <div class="div2">22222222222222</div>
  </body>
  <script src="jquery-1.8.3.min.js"></script>
  <script>
    $(document).ready(function () { 
      $(window).scroll(function () {
        var scrollTop=$(window).scrollTop();
        //$(window).scrollTop()               
        //$(window).height()         
        //$(document).height()         
        $('.div2').css('top',-scrollTop);
      });
    });
  </script>
</html>

문제:상기 코드 를 실행 하면 뚜렷 한 bug 가 있 습 니 다.대체적으로 기능 이 실현 되 었 지만 relative 요소 가 아무리 이동 하 더 라 도 원래 의 위 치 를 차지 하기 때 문 입 니 다.그러나 우리 의 기 대 는 스크롤 바 가 아래 요소 의 밑부분 에 도 착 했 을 때 미 끄 러 지지 말 아야 한 다 는 것 입 니 다.어떻게 해결 하 시 겠 습 니까?
사고방식 2:
나 는 오랫동안 생각 했 지만 요소 가 위 치 를 차지 하지 않 을 뿐만 아니 라 자신의 스타일 도 바 꾸 지 않 을 수 있다 는 것 을 발견 하지 못 했다.그래서 나 는 과감하게 relative 를 포기 하고 absolute 포 지 셔 닝 을 선택 했다.이것 은 우리 스스로 스타일 의 조정 이 필요 하 다.구체 적 인 코드 는 다음 과 같다.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
       content: '';
       display: block;
       clear: both;
      }
    .div1{
      width: 100%;
      margin: 0 auto;
      height: 500px;
      background: bisque;
      position: fixed;
      top: 0;
      left: 0;
    }
    .div1 div{
      width: 1200px;
      margin: 0 auto;
      height: 500px;
      background: #FF0000;
    }
    .div2{
      width: 1200px;
      margin: 0 auto;
      height: 1500px;
      background: #22B0FC;
      z-index: 20000;;
      margin-top: 500px;
    }
  </style>
  <body>
    <div class="div1 clearfix">
      <div>111111111111111111111111111111111111111</div>
    </div>
    <div class="div2">22222222222222</div>
  </body>
  <script src="jquery-1.8.3.min.js"></script>
  <script>
    var div2Height=Number($('.div2').offsetTop);
      var clientHeight=Number($(document).clientHeight);
      var totalHeight=div2Height-clientHeight;
      var objOffset=$('.div2').offset().top;
      var objOffsetLf=$('.div2').offset().left;
      $(document).ready(function () { //        
      $(window).scroll(function () {
        var scrollTop=$(window).scrollTop();
        var objHeight=objOffset-scrollTop;
        console.log(scrollTop);
         if(scrollTop>=0){
          $('.div2').css({'left':objOffsetLf,'top':objHeight,'position':'absolute','margin-top':'0px'});
        }else{
          $('.div2').css({'position':'static','margin-top':'500px'});
        }
      });
    });
  </script>
</html>

주의:① 상반부 요소 의 위 치 는 움 직 이지 않 고 유지 해 야 한다 ② 하반부 확보 등급 이 상반부 보다 높 아야 한다 ③ 본 코드 는 상반부 에 고정 되 어 있 으 며 이 를 따라 가게 하려 면 하반부 스크롤 속도 가 상반부 보다 높 아야 한다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 상하 시차 스크롤 단순 구현 코드

좋은 웹페이지 즐겨찾기