フルスクリーン表示からスクロール後にナビなど表示させたい場合のTip

ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。

$(function() {
    // 対象コンテンツのIDまたはクラス
    var topHeader = $('.hoge');

    // 要素は消しておく
    topHeader.hide();

    $(window).scroll(function () {
        // 画面の高さを取得
        var windowHeight = $(window).height();

        // スクロール位置を取得
        var scroll = $(window).scrollTop();

        // スクロール位置を取得
        if (scroll >= windowHeight) {
            // フルスクリーン分スクロールされた処理
            topHeader.fadeIn();
        } else {
            // フルスクリーン分スクロールされてない処理
            topHeader.fadeOut();
        }
    });
});

$(function() {

// 対象コンテンツのIDまたはクラス

var topHeader = $('.hoge');

// 要素は消しておく

topHeader.hide();

$(window).scroll(function () {

// 画面の高さを取得

var windowHeight = $(window).height();

// スクロール位置を取得

var scroll = $(window).scrollTop();

// スクロール位置を取得

if (scroll >= windowHeight) {

// フルスクリーン分スクロールされた処理

topHeader.fadeIn();

} else {

// フルスクリーン分スクロールされてない処理

topHeader.fadeOut();

}

});

スクリプトは主にスマートフォンサイトを想定していますが、PC表示でも問題は無いはず。
用途に応じて適宜調整すれば良いと思います。

更に、トップページだけに適応したいという場合にはBodyに「.topPage」などクラスを指定し、以下のように条件分岐を追加でも良いと思います。

if($(".topPage").length){
    // 処理内容
}

if($(".topPage").length){

// 処理内容

}

jQueryの length は要素が存在するかどうかをチェックするのにも使え「.topPage」というセレクタがページに存在する時にのみ、処理を実行します。

共有:

いいね: