position: sticky

by redky

HTML

<div class="text">
    <code>position: sticky;</code>
</div>
<div class="sticky">test the world!</div>
<div class="box"></div>

CSS

* {
    margin: 0;
    padding:0
}
.text {
    height: 50px;
}
.sticky {
    position: -webkit-sticky;
    position:sticky;
    top: 0;
    background: #ffa;
    height: 24px;
    line-height: 24px;
}
.box {
    background: #aaa;
    height: 1000px;
}