スクロールが下まで行くとナビゲーションバーを上部に表示

スクロールが下まで行くとナビゲーションバー（ヘッダ部分でもいいけど）を上部に表示
これはjqueryで簡単に実現できる。
cssに以下を記述しておく

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.fixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

}

要するにナビゲーションを固定するクラス
これを例えば.navに与えるかどうかの制御で実現できる

スクリプトは以下だ。

まず変数navにクラス名navを持つナビゲーション部分を代入
次に変数navTopにnavの位置を代入
位置は最初の要素の、ドキュメント上での表示位置を返してくれるoffset関数を使う。
ここはtopの位置
さらにscrollイベントの中で
変数winTopにスクロール位置を代入
スクロール位置は.scrollTop関数を使う
この位置を比較して、スクロール位置がnavの位置より下だったらクラスfixedを追加
そうでなければ、クラスfixedを除去
これだけ。
実際は以下。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var nav = $('.nav');
    //navの位置    
    var navTop = nav.offset().top;
    //スクロールするたびに実行
    $(window).scroll(function () {
        var winTop = $(this).scrollTop();
        //スクロール位置がnavの位置より下だったらクラスfixedを追加
        if (winTop >= navTop) {
            nav.addClass('fixed')
        } else if (winTop <= navTop) {
            nav.removeClass('fixed')
        }
    });
});
</script>

$(function() {

var nav = $('.nav');

//navの位置

var navTop = nav.offset().top;

//スクロールするたびに実行

$(window).scroll(function () {

var winTop = $(this).scrollTop();

//スクロール位置がnavの位置より下だったらクラスfixedを追加

if (winTop >= navTop) {

nav.addClass('fixed')

} else if (winTop <= navTop) {

nav.removeClass('fixed')

}

});

</script>

これはfooterについても言える。

コメントする コメントをキャンセル

コメントするコメントをキャンセル