Simple implementation code of js up and down parallax scrolling

2021-07-26 06:45:06
OfStack

Project to achieve a simple up and down parallax scrolling, that is, when the page slides to a fixed position, so that the upper and lower two pages appear superposition effect, recovery, recovery.

Realization of functional technology: element positioning and mouse event

Thoughts 1:

1 began to think about setting scroll bar to listen to events, and when it reached a fixed position, the lower element set relative attribute (this can ensure that its original style will not be changed and the element position can be adjusted), so 1 code was born:


<!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() This method is the distance the current scroll bar scrolls 
        //$(window).height() Gets the height of the current form 
        //$(document).height() Gets the height of the current document 
        $('.div2').css('top',-scrollTop);
      });
    });
  </script>
</html>

Problem: Running the above code will find that there is an obvious bug. Although the general function has been realized, the elements of relative will still occupy their original positions no matter how they are moved. However, our expectation is that the scroll bar should not slide when it reaches the bottom of the element below. How to solve this problem?

Idea 2:

I have been thinking for a long time, but I still haven't found that the elements can neither occupy the position nor change their own style, so I boldly give up relative and choose absolute positioning, which requires us to adjust our own style. The specific code is as follows:


<!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 () { // I am used to writing like this 
      $(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>

Note: ① The position of the upper part element needs to be kept unchanged ② The lower part ensures that the level is higher than the upper part ③ This code aims at the upper part fixed. If you want it to follow, you need to ensure that the rolling speed of the lower part is greater than that of the upper part