Pure CSS for adsorption

This article is reproduced from the public number: IQ front end

preface

The Adsorption effect is when a page rolls to a location where the elements are fixed and subsequently scrolls with the page. 吸附效果 are common, such as 吸顶效果 and 吸底效果 and are often used in scenes such as 跟随导航 移动广告 and 悬浮提示

principle

In the jQuery era, there were many adsorption plug-ins, and now the three main front-end frameworks that are commonly used also have their own third-party adsorption effect components. They all have a common implementation principle: listen to scroll event, determine the location range of scrollTop and 目标元素 and, if eligible, declare position of the 目标元素 as fixed positioning the 目标元素 relative to the browser window, making the user look as if they are pinned to the browser's specified location.

Javascript to achieve adsorption effect of the code on the Internet to search a lot, not to mention the author likes to play CSS, here will not paste the relevant JS代码 T his article recommends a rare and rarely used CSS attribute for your classmates: position:sticky A simple "two-line CSS core code" can complete the function of "more than a dozen lines of JS core code", why not.

implement

A brief review of position commonly used values, how to use do not say, students should be familiar.

Turns an element into a 粘性定位 the value is sticky "Sticky positioning" is a combination of 相对定位 and 固定定位 with elements positioned relatively before and after 特定阈值 span.

Mainly in order to promote knowledge points, directly on the code, the style is not fine grinding, will look at it.

<div class="ads-position">
    <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
    </ul>
</div>

.ads-position {
    overflow: auto;
    position: relative;
    width: 400px;
    height: 280px;
    outline: 1px solid #3c9;
    ul {
        padding: 200px 0;
    }
    li {
        position: sticky;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        &:nth-child(1) {
            top: 0;
            z-index: 9;
            background-color: #f66;
        }
        &:nth-child(2) {
            top: 40px;
            z-index: 9;
            background-color: #66f;
        }
        &:nth-child(3) {
            background-color: #f90;
        }
        &:nth-child(4) {
            bottom: 0;
            z-index: 9;
            background-color: #09f;
        }
        &:nth-child(5) {
            bottom: 40px;
            z-index: 9;
            background-color: #3c9;
        }
    }
}

The end result is as follows. T he two lines of CSS core code are position:sticky and top/bottom:npx All five nodes in the demo above declare position:sticky but different adsorption effects are produced due to differences in top/bottom assignments.

Careful classmates may find these elements 某些滚动时刻处于相对定位，在特定滚动时刻就处于固定定位

• 1st <li> top is 0px scroll to the top of 容器顶部 and pin
• 2nd <li> top is 40px and scrolls to 距离容器顶部40px
• The third <li> without declaring top/bottom it remains relative
• The 4th <li> bottom is 40px and scrolls to 距离容器底部40px
• The 5th <li> bottom is 0px and is fixed when you scroll to 容器底部

Of course, switching left and right can also achieve horizontal 吸附效果

note

The reference for 粘性定位 is not necessarily position:fixed

When any 祖先元素 of the 目标元素 element does not declare position:relative|absolute|fixed|sticky it is consistent with position:fixed

When the 祖先元素 closest to the 目标元素 element position:relative|absolute|fixed|sticky the 目标元素 is 粘性定位 to that 祖先元素

Make sure that the reference is consistent with position:absolute

compatible

Compatibility is barely enough, with browsers supported in the last 2 years, and the compatibility of Safari and Firefox is great. Students with 吸附效果 are advised to give it a try and be compatible with IExplorer

The above is W3Cschool编程狮 about pure CSS to achieve adsorption effect of the relevant introduction, I hope to help you.