複数の変数を代入してさまざまな範囲の高さを取得する方法 │ ここつぶ

1. 可変する複数の高さを取得して合わせた高さを使いたい
- 1.1. HTML
- 1.2. jquery

可変する複数の高さを取得して合わせた高さを使いたい

可変するバナー画像の高さを取得するというのを以前まとめましたが、今回は可変する複数の高さを取得して、それぞれの高さを合わせる方法をまとめました。

以前の記事はこちら

可変するヘッダ固定バナー（jsで高さを取得する方法）

可変する固定バナーの上に、閉じるボタンで消えるお知らせ枠をつけました。

閉じるボタンで消えるお知らせ枠なので、お知らせ枠がない場合も考慮する必要がありますね！

・複数の高さの変数を取得
・変数を合わせてスタイルに記述

このあたりの記述に慣れてくると、さまざまな状態のページデザインのマークアップをする時にかなり役立ちます！

デモサイトはこちら

DEMO

HTML

閉じるボタンで消えるお知らせ枠と固定画像は、スクロールしてもページ上部で固定されています。

閉じるボタンで消えるお知らせ枠を消すと、固定画像のみページ上部で固定されたままになりますので、固定画像は閉じるボタンで消えるお知らせ枠分の上にとっていた空き（style=”top: xxxpx;“）をなくす必要がありますね！

また、はじめは二つの要素分メニュー以下（class=”wrapper”）は下にさげなければいけませんが、閉じるボタンで消えるお知らせ枠が消えた場合はその分メニュー以下は上に上がります。

<div class="attention__area">
    <p class="attention__text">クリックしたら消えるコンテンツ<span>×</span></p>
</div>
<div class="head_banner">
    <a href="https://cocotsubu.com/" target="_blank" rel="noopener">
        <img src="https://cocotsubu.com/demo/demo08/img/banner.jpg">
    </a>
</div>
<div class="wrapper">
    <div class="menu-box">
        <ul class="menu_list">
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
            <li class="menu_item"><a href="#">menu</a></li>
        </ul>
    </div>
    <div class="contents">
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/01.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/02.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/03.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/01.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/02.jpg" alt="">
        </div>
        <div class="box">
            <img src="https://cocotsubu.com/demo/demo01/images/03.jpg" alt="">
        </div>
    </div>
</div>

jquery

var height_banner=$(“.head_banner”).height();
固定バナーの高さを　var height_banner

var height=$(“.attention__area”).outerHeight(true);
閉じるボタンで消えるお知らせ枠の高さを var height　としました。

どこまでの高さを取得するかで、.height()だったり、.outerHeight(true)だったり記述方法が変わります。

$(“.attention__area + .head_banner”).css(“top”, height + “px”);
お知らせ枠がある場合は、固定バナーをお知らせの高さ分下に下げます。

お知らせ枠と固定バナーがある場合はメニュー以下のコンテンツ（.wrapper）を二つの高さ分下にさげます。
$(“.attention__area + .head_banner + .wrapper”).css(“padding-top”, (height + height_banner) + “px”);

heightとheight_bannerを（）でまとまりにして、合わせた数値を算出することができます！

お知らせ枠をクリックしてお知らせ枠が消えた時、固定バナーを一番上に移動します。
それに伴いコンテンツ（.wrapper）を上にあげます。
二つの直接スタイルを記述する例として、その場合にのみ上にmargin-top:10px;の空きをつけます。
$(“.attention__area + .head_banner + .wrapper”).css({“padding-top”: height_banner , “margin-top”: “10px”});

$(function(){
    //固定バナーの高さ
    var height_banner=$(".head_banner").height();
    //閉じるボタンで消えるお知らせ枠高さ
    var height=$(".attention__area").outerHeight(true);


    //固定バナーをお知らせ枠分下に下げる
    $(".attention__area + .head_banner").css("top", height + "px");
    //コンテンツをお知らせ枠と固定バナー分下に下げる
    $(".attention__area + .head_banner + .wrapper").css("padding-top", (height + height_banner) + "px");

    //お知らせ枠の×をクリックしたらお知らせ枠が消える
    $(".attention__area span").click(function(){
    $(this).parents(".attention__area").hide();
    $(".attention__area + .head_banner").removeAttr('style');
    //コンテンツが固定バナーの高さ分下がる
                $(".attention__area + .head_banner + .wrapper").css({"padding-top": height_banner, "margin-top": "10px"});
    })
});

メニューを固定していて、さらにその上に固定バナーをつけたい時などにも転用できそうですね！

おすすめのjQuery参考書はこちら！