【jQuery】スクロールでメニューをフッターに固定する

投稿者: | 2021年4月14日
0件のコメント
JQueryアイキャッチ画像

今回はスクロールでフッターのTOPがメニュー下の位置にきたら、メニューをフッターのTOPに固定させる方法を解説します。

 

【完成後】

position_bottom

 

それではいってみましょう！

 

手順

作成手順

・ウィンドウの高さを取得

・メニューの高さを取得

・フッターのTOPを取得

・メニューとフッターのTOPの開きを求める

・スクロールTOPを取得

・スクロールTOPがメニューの高さとフッターTOPの開きより大きくなったらをIF判定で固定

ざっくりこんな感じです。

 

ウィンドウの高さを取得

$(window).innerHeight()で取得します。

1
2
//➀ウィンドウ（ブラウザ）の高さ
let winHeiht = $(window).innerHeight();

 

box1（メニュー）の高さを取得

$(“セレクター”).get(0).offsetHeightで取得します。

1
2
//➁box1(メニュー)の高さ
let boxHeiht = $(".sample14243").get(0).offsetHeight;

 

box2（フッター）のTOPを取得

$(“セレクター”).get(0).offsetTopで取得します。

1
2
//➂box2（フッター）のTOP
let boxTop = $(".footer14243").get(0).offsetTop;

 

box1とbox2の開きを求める

開き＝ウィンドウ高さーbox1高さー(ウィンドウ高さーbox2TOP)で取得します。

1
2
//➃Box1とBox2の開きを求める
let Total = winHeiht - boxHeiht - (winHeiht - boxTop);

 

ウィンドウのスクロールTOP座標取得

$(window).scrollTop()で取得できます。

1
2
//➄ウィンドウ（ブラウザ）のスクロールTOP座標取得
let sclTop = $(window).scrollTop();

 

CSSのFixed bottomを適用

重要なのはここで先程作成したものを足したり引いたりして、CSSのbottomを可変にします。そうすることによってフッターに固定されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
//➅IFでスクロールTOPがTotalより大きくなったらをFixed bottomを実行
if (Total < sclTop) {
    $(".sample14243").css({
        "position": "fixed",
        "bottom": sclTop + (winHeiht - boxTop),
        "top": ""
    });
} else {
    $(".sample14243").css({
        "position": "fixed",
        "top": 0
    });
}

 

全サンプルコード

コピペで即試せます(*ﾟ▽ﾟ)ﾉ

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="jn">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <title>メニューをフッターに固定</title>
    <style>
        .test14243 {
            position: fixed;
            top: 0;
            right: 0;
        }
 
        .sample14243 {
            background-color: red;
            height: 120px;
            width: 350px;
            border: 5px solid;
            text-align: center;
            font-size: 30px;
        }
 
        .footer14243 {
            background-color: skyblue;
            height: 1200px;
            width: 350px;
            border: 5px solid orange;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <div class="sample14243">box1（メニュー）</div>
    <div class="test14243">
        <li class="window14243" style="background-color: red;"></li>
        <li class="boxHeiht14243" style="background-color: red;"></li>
        <li class="boxTop14243" style="background-color: red;"></li>
        <li class="scrollTop14243" style="background-color: red;"></li>
        <li class="Total14243" style="background-color: red;"></li>
    </div>
 
    <script>
        $(function() {
 
            // スクロールイベント
            $(window).scroll(function() {
                //➀ウィンドウ（ブラウザ）の高さ
                let winHeiht = $(window).innerHeight();
                $(".window14243").text("➀ウィンドウ高さ : " + winHeiht + "px");
 
                //②box1の高さ
                let boxHeiht = $(".sample14243").get(0).offsetHeight;
                $(".boxHeiht14243").text("➁box1高さ : " + boxHeiht + "px");
 
                //③box2のTOP
                let boxTop = $(".footer14243").get(0).offsetTop;
                $(".boxTop14243").text("➂box2TOP : " + boxTop + "px");
 
                //④Box1とBox2の開きを求める
                let Total = winHeiht - boxHeiht - (winHeiht - boxTop);
                $(".Total14243").text("➃Total : " + Total + "px");
 
                //➄ウィンドウ（ブラウザ）のスクロールTOP座標取得
                let sclTop = $(window).scrollTop();
                $(".scrollTop14243").text("➄スクロールTOP : " + sclTop + "px");
 
                //➅IFでスクロールTOPがTotalより大きくなったらをFixed bottomを実行
                if (Total < sclTop) {
                    $(".sample14243").css({
                        "position": "fixed",
                        "bottom": sclTop + (winHeiht - boxTop),
                        "top": ""
                    });
                } else {
                    $(".sample14243").css({
                        "position": "fixed",
                        "top": 0
                    });
                }
            });
        });
    </script>
 
    <div class="all14243">
        <script>
            // スクロールできるように空白を作成
            for (let i = 0; i < 27; i++) {
                document.write('<p>&nbsp;</p>');
            }
        </script>
    </div>
 
    <div class="footer14243">
        <script>
            // スクロールできるように空白を作成
 
            document.write('<p>box2（フッター）</p>');
        </script>
 
    </div>
</body>
 
</html>

 

まとめ

私のブログでは下記の二つの目次をこの方法を応用してるので参考にしてみてくささい！

・エクセルメニュー

・Jqueryメニュー

 

【その他CSSのみで固定する方法】

・右サイドの一番下の要素をスクロール固定する場合

・naviボタンをスクロールTOP固定する場合

 

以上です。

スクロール固定

CSSのみでスクロール固定（sticky）

画面をスクロールでメニューの固定表示

スクロールでメニューをフッターに固定する

スクロール後に文字や絵文字を固定表示

グーグルアドセンス広告をスクロールで固定表示させる

画面スクロール後の固定fixedの画面チラツキをなくす

スクロールリアルタイム

Window（画面ブラウザ）のスクロール位置を取得する

スクロールでページの一番下の値をリアルタイムに取得

画面の座標,高さ,スクロール位置をリアルタイムに取得

関連記事

ページ内のタグ（要素）にスクロールとジャンプ移動

JavaScript/jQuery

JavaScript/jQuery目次