CSS stick

CSS 使用固定定位时候，若其宽度为百分比，其计算相对于viewport计算。

by Wang Peng

HTML

<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<div class="container">
    <div data-stick class="nav">stick</div>
</div>

CSS

.container {
    width: 80%;
    height: 500px;
    margin: 0 auto;
    padding-top: 50px;
    background: #ccc;
}

.nav {
    width: 80%;
    margin: 0 auto;
    
    background: red;
}
.stick {
    position: fixed;
    top: 0;
}

JavaScript

$(function(){
    var stickElm = $("[data-stick]");
    var top = stickElm.offset().top;
    $(window).on('scroll', function() {
        if($(window).scrollTop() >= top) {
            stickElm.addClass("stick");
        } else {
            stickElm.removeClass("stick");
        }
    })
})