ページ上部に吸着するメニュー。using jQuery throttle

by kanonji

HTML

<script src="//libcache.herokuapp.com/modernizr/2.6.2/modernizr.mini.js"></script><script src="//libcache.herokuapp.com/jquery/jquery-throttle-debounce/jquery.ba-throttle-debounce.min.js"></script>

<div id="container">
    <nav id="site" class="fixed"></nav>
    <div id="theme"></div>
    <nav id="page"></nav>
    <div id="content"></div>
</div>

CSS

#container{
    position: relative;
    z-index:10;
}
#site{
    background: #fcc;
    height: 20px;
    
}
#theme{
    background: #cfc;
    height: 200px;
}
#page{
    background: #ccf;
    height: 20px;
}
#content{
    background: #ccc;
    height: 1000px;
}
.fixed{
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:9999;
}

JavaScript

$(function(){
    var $nav = $('#page');
    var navTop = $nav.offset().top;
    $(window).scroll($.throttle(100, callback));
    function callback(e){
        var winTop = $(this).scrollTop();
        if(winTop >= navTop) {
            $nav.addClass('fixed');
            $nav.css({top: '20px'});
        } else {
            $nav.removeClass('fixed');
        }
    }
});