position : sticky

by toubia95

HTML

<div class="container">
    <div class="sticky">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>
</div>

CSS

/* http://html5please.com/#sticky */
.container {
    position: relative;
    width: 200px;
    height: 500px;
    background: silver;
    margin-bottom: 1000px;
}
.sticky {
    position:sticky;
    width: 100%;
    top: 0px;
    z-index: 1;
    height: 200px;
    background: red;
}