What is sticky?

Sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky sticky In many cases, we expect an element to be fixed (or suspended) when we scroll to the top of the page, with position represented as fixed.

The two methods

CSS method: position: sticky

The word sticky in Chinese means “sticky”, and the appearance of sticky is also consistent with this appearance. Position :fixed is a combination of position:relative and position:fixed — when the element is inside the screen, it is described as relative and is about to roll off the screen, it is described as fixed.

Example:

<style> .red{ position: -webkit-sticky; position: sticky; top: 0; } </style> <body style="height: 2000px"> <div style="height: 800px; background-color: blue"></div> <div class="red" style="height: 200px; background-color: red"></div> <div style="height: 200px; margin-top:600px; background-color: black"></div> </body>Copy the code

When you run the previous code, you will see the results of the following two diagrams. When the red block slides to the top of the page, it stays at the top. In this case, it is fixed.

Figure 1. When the red block slides to the top, the bottom is blank

Figure 2. After the red block slides to the top, the page continues to slide and black blocks appear. The red block now appears as fixed.

The sticky attribute depends on scrolling by the user and switches between position:relative and position:fixed. Element positioning is represented by relative positioning before crossing a specific threshold, and then fixed positioning. The sticky attribute is valid only when the following conditions are met:

  1. The parent element cannot have any overflow Settings other than overflow: Visible or it will have no sticky effect. Because the scroll container is changed (even if the scroll bar does not appear). So, if your position:sticky is invalid, see if one of your ancestors set Overflow :hidden and remove it.
  2. The parent element sets a fixed height of the same height as the sticky positioning element, or calculates a height of the same height as the sticky positioning element, and has no stickiness effect.
  3. If the sticky elements in the same parent container have the same location value, they will overlap. If the parent elements belong to different elements, and the parent elements are closely related, the magpie nest will be occupied, crowding out the original elements, forming the effect of sequential occupying. As for the reason, it is necessary to understand the calculation rules of viscous positioning.
  4. Sticky positioning, not only can set top, based on the rolling container upper edge positioning; You can also set bottom, which is sticky relative to the bottom. If you scroll horizontally, you can also set the left and right values.

There are bosses more detailed tutorial: www.zhangxinxu.com/wordpress/2…

GetBoundingClientRect () and scrollTop()

The getBoundingClientRect() method returns an object containing the left, right, top, and bottom attributes, which correspond to the distance between the upper left and lower right corner of the element and the upper left corner of the viewPort. ScrollTop () method: Returns or sets the vertical position of the scroll bar for the matched element. When used to return position, this method returns the vertical position of the scrollbar of the first matched element; When used to set position, this method sets the vertical position of the scroll bar for all matched elements. This article uses it to return the vertical position of the first matched scroll bar.

Example:

<head> <meta charset="UTF-8"> <title>scroll</title> <script SRC = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js" > < / script > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .scroll_fixed{ position: fixed; top: 0; } </style> </head> <body style="height: 2000px"> <div style="height: 1000px; background-color: blue"></div> <div id="rect" class="scroll" style="width:200px; height: 200px; background-color: red"></div> <div style="height: 200px; background-color: blueviolet; margin-top:600px"></div> <script> $(document).ready(function () { let scroll = document.getElementById("rect"); let top = scroll.getBoundingClientRect().top; //on() add a listener for "events to listen on", Function (){$(window).on("scroll",function (){//this represents window,$(this).scrollTop() returns the vertical position of the window scrollbar, This is the absolute distance of the scroll bar from the top of the page. if($(this).scrollTop()>top){ $("#rect").addClass("scroll_fixed"); } else{ $("#rect").removeClass("scroll_fixed"); } }) }) </script> </body>Copy the code

When the vertical position of the window scroll bar is greater than the distance of the red block relative to the top of the view window when the page slides down, call addClass() to addClass scroll_fixed{position: fixed; top:0; }, so that the red block is now fixed at the top of the page. Conversely, when the page slides up and the vertical position of the window scrollbar is less than the distance of the red block relative to the top of the view window, call the removeClass() method to remove the element’s class {position: fixed; top:0; }, the element returns to its original position state. The result is shown below: Figure 1. When the red block slides to the top, the bottom is blank

Figure 2. After the red block slides to the top, the page continues to slide and a purple block appears. The red block now appears as fixed.