Position new attribute Sticky

Today, I stumbled upon an interesting private property of a weikit.-webkit-sticky,position:sticky is a new CSS3 property that behaves like Position:relative and position:fixed, When the target area is visible in the screen, it behaves like a position:relative; When the page scrolls beyond the target area, it behaves like a position:fixed, which is fixed at the target location.

It's also very simple to use:

The code is as follows:
. 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, the consortium has just begun to discuss it, and now only the WebKit nightly version and the Chrome 23.0.1247.0+ Canary are starting to support it.
It is also important to note that if both left and right values are defined, then left is in effect and right will not be valid, as well as defining top and Bottom,top win ~ ~
Fall back
Although other browsers are not yet supported, but the implementation is not difficult, we can use JS simple implementation:
Html

The code is as follows:
<div class= "Header" ></div>

Css

The code is as follows:
. Sticky {
position:fixed;
top:0;
}
. header {
width:100%;
Background: #F6D565;
padding:25px 0;
}

Js

The code is as follows:
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);

Well, for the front end, the new technology is used to enhance the user experience to reflect its value ~ ~ (can be applied to mobile projects OH)

Position new attribute Sticky