Element viewing area client series / element scroll series / Case: imitation Taobao fixed right sidebar

Element viewable client series
Client is translated as the client. We use the relevant attributes of the client series to obtain the relevant information of the element visual area. Through the relevant attributes of the client, we can dynamically obtain the border, size, etc. of the element.

client family properties      effect
element.clientTop      Returns the size of the top border of an element
element.clientLeft      Returns the size of the left border of an element
element.clientWidth      Return itself, including padding, width of content area, without border, and return value without unit.
element.clientHeight      Return itself, including padding, height of content area, without border, and return value without unit.
The biggest difference between client and offsetWidth is that it does not contain borders

Element scroll series
Using the relevant attributes of the scroll series, you can dynamically get the size and rolling distance of the element.

scroll series properties      effect
element.scrollTop      Returns the upper distance rolled up, and returns the value without unit
element.scrollLeft      Return the left distance rolled up, and return the value without unit
element.scrollWidth      Returns the actual width of itself, without borders, and the returned value without units (including padding)
element.scrollHeight      Returns the actual height without borders, and the returned value without units (including padding)
The height obtained by scroll is the height of the real content

Scroll scroll event, an event that will be triggered when the scroll bar changes

Case: imitation Taobao fixed right sidebar
The original sidebar was absolute positioning
When the page scrolls to a certain position, the sidebar changes to fixed positioning
If the page continues to scroll, it will return to the top
thinking

Because it is page scrolling, the event source is document.
Scrolling to a certain position is to judge the upper value of the page being rolled up.
The header of the page being rolled up: it can be obtained through window.pageYOffset. If it is the left side of the volume, it is window.pageXOffset
Note: the header where the element content is rolled up is element.scrollTop. If it is the header where the page is rolled up, it is window.pageYOffset.
 

<style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 1200px;
        margin: 10px auto;
      }

      .header {
        margin-top: 10px;
        height: 100px;
        background-color: #4ca2a5;
      }

      .banner {
        height: 500px;
        background-color: hsl(278, 84%, 69%);
      }

      .main {
        height: 1000px;
        background-color: #523088;
      }

      .slider-bar {
        position: absolute;
        top: 300px;
        right: 100px;
        height: 200px;
        width: 60px;
        background-color: #d80bc7;
      }

      span {
        display: none;
        text-decoration-line: none;
        color: #000;
        font-weight: bold;
        font-size: 20px;
      }
    </style>
  </head>

  <body>
    <div class="header"></div>
    <div class="banner"></div>
    <div class="main"></div>
    <div class="slider-bar"><span class="goBack">Back to top</span></div>
    <script>
      var banner = document.querySelector(".banner");
      var main = document.querySelector(".main");
      var sliderbar = document.querySelector(".slider-bar");
      var goBack = document.querySelector(".goBack");
      var bannerTop = banner.offsetTop;
      var mainTop = main.offsetTop;
      var sliderbarTop = sliderbar.offsetTop - bannerTop;
      document.addEventListener("scroll", function () {
        // 1. When the rolled head of the page is greater than or equal to the offsetTop of the banner, change the left to fixed positioning, and change the top value of the left [if the edge offset of the left is not modified, it will still be offset with the original edge offset after it becomes fixed positioning]
        if (window.pageYOffset >= banner.offsetTop) {
          sliderbar.style.position = "fixed";
          sliderbar.style.top = sliderbarTop + "px";
        } else {
          sliderbar.style.position = "absolute";
          sliderbar.style.top = "300px";
        }
        // 2. The a label is displayed when the header of the page rolled up is greater than or equal to the offset top of the footer
        if (window.pageYOffset >= mainTop) {
          goBack.style.display = "block";
        } else {
          goBack.style.display = "none";
        }
      });
    </script>
  </body>

offset is used to get the element position
client is used to get the element size
scroll is used to get the scrolling distance of the element
The page scrolling distance is obtained through window.PageYOffset

Tags: Javascript Front-end JQuery

Posted on Fri, 03 Dec 2021 01:23:33 -0500 by jeremuck