Position:sticky Introduction

Finishing from: STICK YOUR landings! Position:sticky LANDS in WEBKIT
Chinese Original: Position:sticky Introduction
Please respect the copyright, reproduced please indicate the source, thank you ~ ~

The user's screen is getting bigger and the page is too wide to read, so most of the site's main body width and compared to the previous not much change, so there are more and more white space in the browser, so you may notice that many websites start to keep a part of the content visible when scrolling, for example, some areas of the sidebar. Position:sticky was born for that.

Position:sticky usage

Position:sticky is a new CSS3 property that behaves like a position:relative and position:fixed, and behaves as if the target area is visible on the screen; When the page scrolls beyond the target area, it behaves like a position:fixed, and it is anchored to the target location.

It is also very simple to use:

1 2 3 4 5

. Sticky { position:-webkit-sticky; Position:sticky; Top: 15px; }

For now, you need to use a private prefix ~ ~

Browser compatibility:

Since this is a completely new attribute, so far there is no specification, and the consortium has just begun to discuss it, and now only the WebKit nightly version and the Chrome development version (Chrome 23.0.1247.0+ Canary) are starting to support it.

Also note that if both the left and right values are defined, then left is in effect and right is invalid, and also defines top and Bottom,top wins ~ ~

Fall back

Although other browsers are not yet supported, but it is not difficult to achieve, we can use JS simple implementation:

Html

1	<div class= "header" ></div>

Css

1 2 3 4 5 6 7 8 9

. Sticky { position: fixed; Top: 0; } . Header { width: 100%; Background: #F6D565; padding: 25px 0; }

Js

1 2 3 4 5 6 7 8 9

var header = Document.queryselector ('. Header '); var origoffsety = header.offsettop; function Onscroll (e) { window.scrolly >= origoffsety header.classList.add (' sticky ') : header.classList.remove (' sticky '); } document.addeventlistener (' scroll ', onscroll);

Here is a simple demo.

Well, for the front end, the new technology is used to enhance the user experience to reflect its value ~ ~