One. What is top suction?

Top sucking is a common interaction mode in Web development. Common application scenarios include navigation, search box and so on. Can do flow horizontal distribution, eye-catching top effect and horizontal slide cut TAB gesture, can let users quickly find more goods.

The market enjoys the TOP effect display of H5 navigation bar

1. Taobao Juhuasuan top suction demonstration:

2. Common tabbar top suction scheme

  1. Top suction scheme based on viscous position
  2. JS based on listening scroll event suction scheme

Iii. Principle and comparison of the scheme

1. Realization and detailed explanation of position stickiness scheme

1.1. Detailed knowledge

Position enables the CSS property that we often use to provide a great solution for layout and solving specific problems, such as the various ICONS and labels on cards. Sticky position is also one of the schemes to achieve top sucking. First, let’s take a look at the attribute values and related meanings of position:

The values Relevant interpretation
static This keyword specifies the normal layout behavior of the element, that is, the current layout position of the element in the general flow of the document. The top, right, bottom, left, and Z-index attributes are invalid.
relative Under this keyword, the element is placed where it was when it was unpositioned, and then repositioned without changing the page layout (thus leaving the element blank where it was when it was unpositioned). Position :relative invalid table-*-group, table-row, table-column, table-cell, table-caption elements.
absolute Elements are removed from the normal document flow. No space is reserved for the element, and its position is determined by specifying the offset of the element relative to the nearest non-static positioned ancestor element. Absolutely positioned elements can be set to margins and won’t merge with other margins.
fixed Elements are removed from the normal document flow, and no space is reserved for them. Instead, they are positioned by specifying their position relative to the screen viewport. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page. The fixed property creates a new cascading context. When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.
sticky The element is positioned according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block; Includes table-related elements, offset based on top, right, bottom, and left values. The offset value does not affect the position of any other elements.

MDN portal

As the name implies, the Chinese word sticky means “sticky”, and its effect is the combination of position:relative and position:fixed. When the element is inside the screen, it’s described as relative, and when it rolls off the screen, it’s described as fixed. This property was abandoned by Chrome, but has since been supported

<! -- Example usage --> nav{position: -webkit-sticky;
    position: sticky;
    top: 0;
}
Copy the code
1.2 compatibility

As shown in the figure above, sticky position is supported by all types of browsers and is well supported, except safari which also requires -webkit- prefix support.

The demo implementation:

* {padding:0;
        margin:0;
    }
    .container{
        width:100%;
        background:rgba(0, 0, 5); }.nav{
        width:100%;
        height:50px;
        text-align: center;
        line-height: 50px;
        background: black;
        color:white;
        position: sticky;
        top:0;
    }
    .body{
        width:100%;
        height:10000px;
    }
Copy the code
<div class="container">
    <div style="width:100%; height:100px;"></div>
    <div class="nav">Position sticky</div>
    <div class="body"></div>
</div>
Copy the code

1.3. You may step in a hole
  1. If you use position:sticky, you must use either top, left, right, or bottom at the same time
  2. The parent element cannot have overflow:hidden or overflow:auto
  3. The height of the parent element cannot be less than that of the sticky element
  4. The sticky element is valid only within its parent element

2. JS listening on scroll event drawing scheme

The overall idea is to monitor the rolling event through JS. When the rolling event reaches the top (when the distance from the top is 0), the position attribute of the element is dynamically changed to fixed, so as to achieve the effect of top drawing. The conventional way to determine the distance from the top is to use offsetTop, but offsetTop is an offset relative to the location of the parent element. If the element that needs to scroll to the top appears to position the parent element, then offsetTop is not the distance from the top of the page. Here we consider using getBoundingClientRect() to get the distance of an element on the page relative to the top, bottom, left, and right of the browser window. MDN portal

function compute(){
    let ele = document.getElementById('nav');
    	if(ele.getBoundingClientRect().top === 1){
    		ele.style.position = "sticky";
    		ele.style.top = 0; }}window.addEventListener('scroll', compute);
Copy the code

4. To summarize

There is no best technology or solution, only the best technology and solution for the current business.