CSS to talk about the new features position: sticky use

Word sticky in Chinese means "sticky", of course, he is also in line with the characteristics of his name. We attribute commonly used position is nothing more than relative (relative positioning), absolute (absolute positioning), fixed (fixed positioning).

• relative: generating element relative positioning, positioning relative to its normal position.
• absolute: generating absolute positioning element relative to the first parent element is positioned outside the static positioning.
• fixed: generating element absolute positioning, relative to the browser window positioning.

Sticky and it can be seen position:relativeand the position:fixedcombination of - when the screen elements, expressed as relative, necessary to get out of the display screen when the performance of fixed. Effect  link here .

HTML is structured as follows:

<article>
    <div class="category">Category Header</div>
    <h1 class="title">Article 1 Title</h1>
    <p>Body content would go here.</p>
    <!-- More Content -->
    <div class="footer">
        <p>Article 1 Footer</p>
    </div>
</article>

<article>
    <div class="category">Category Header</div>
    <h1 class="title">Article 2 Title</h1>
    <p>Body content would go here.</p>
    <!-- More Content -->
    <div class="footer">
        <p>Article 2 Footer</p>
    </div>
</article>

The above contains two article, the article contains a Header, Title, content and footer.

CSS are the following:

.category,.title,.footer {
    position: -webkit-sticky; /* Required for Safari */
    position: sticky;
    height: 50px;
}

.category {
    top: 0;
}

.title {
    top: 0;
    background: green;
    margin: 0;
}

.footer {
    bottom: 100px;
    z-index: -1;
}
article {
    background-image: linear-gradient(
        to bottom,
        transparent 50px,
        #F5A623 50px,
        #F5A623 calc(100% - 50px),
        transparent 0
    );
    margin: auto auto 50px auto;
}

A first set positioned Header, Title and footer is sticky, for the current Safari browser requires the use of the prefix do -weikit- compatible processing

position: -webkit-sticky; /* Required for Safari */
position: sticky;

Second, then set the pasting position, it is to note the following

1. Shall designate top, one of the right, bottom left or four threshold values, the viscosity before positioning effect. Otherwise, their behavior and the relative positioning of the same.
2. When the top and bottom at the same time setting high top priority in effect, when left and right at the same time set up, left high priority.
3. It is set to position: overflow attribute any parent of sticky element must be visible, otherwise position: sticky will not take effect
4. Reaches the set threshold. Is set position: sticky element is fixed relative performance is based on whether the elements set threshold value determined
5. Parent element can not set a fixed heightheight value, or there is no viscosity effect (2019-05-22新增)

top: 0;

Here we can see the set pasted to the top position.

Third, the effect of optimization

In order to achieve the effect of the case, we need to set some of the properties of the article

article {
    background-image: linear-gradient(
        to bottom,
        transparent 50px,
        #F5A623 50px,
        #F5A623 calc(100% - 50px),
        transparent 0
    );
    margin: auto auto 50px auto;
}

Here the use of the new features CSS3 linear gradient, to bottom represents the direction from top to bottom, transparent 50px a front region 50px transparent color, calc (100% - 50px) where a new style property calc CSS3, you can use it dynamically calculating the width and height.

Fourth, practical application

In practice, we can use it in many places, in my personal blog that uses this feature, click View

Follow-up I would use more new features on my personal blog site, the interest can be sustained attention