headerのメニュー選択時にヘッダーの高さ分padding-topを指定したいです。

ホームページのheaderをposition: fixed;で固定しています。

初期表示時はjavascriptでヘッダーの高さ分mainを下げる指定してheaderと重ならないようにしているのですが、メニュー選択時には項目とheader欄が重なって一部見えない状態になっています。

headerのメニュー選択時に選択した項目へ、ヘッダー分padding-topを指定したいです。

下記、ソースです。

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <link  rel="stylesheet" href="css/bootstrap.min.css">
9    <link  rel="stylesheet" href="css/style.css">
10  </head>
11  <body>
12    <header class="header">
13      <nav class="navbar navbar-expand-lg">
14        <a class="navbar-brand" href="index.html">
15          <img src="img/logo.png" alt="">
16        </a>
17        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
18          <span class="navbar-toggler-icon"></span>
19        </button>
20        <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-end">
21          <ul class="navbar-nav">
22            <li class="nav-item">
23              <a class="nav-link " href="#">トップ</a>
24            </li>
25            <li class="nav-item">
26              <a class="nav-link" href="#company">企業情報</a>
27            </li>
28            <li class="nav-item">
29              <a class="nav-link" href="#contents">事業内容</a>
30            </li>
31            <li class="nav-item">
32              <a class="nav-link" href="#recruit">採用情報</a>
33            </li>
34            <li class="nav-item">
35              <a class="nav-link" href="#contact">お問い合わせ</a>
36            </li>
37          </ul>
38        </div>
39      </nav>
40    </header>
41    <main class="main">
42      <div class="mv">
43        <img src="img/top.png" />
44        <h1 id="companyName" class="display-4">タイトル</h1>	
45      </div>
46      <section id="company">
47        <div class="container p-md-5 p-4">
48          <h3 class="text-center p-md-5 p-4">企業情報</h3>
49          <div class="p-md-5 p-4">
50              テキストが入ります。テキストが入ります。
51　　　 </div>
52        </div>
53      </section>
54      <section id="contents">
55        <div class="container p-md-5 p-4">
56
57        </div>
58      </section>
59      <section id="recruit">
60        <div class="container p-md-5 p-4">
61          <h3 class="text-center p-md-5 p-4">採用情報</h3>
62          <div class="p-md-5 p-4">
63              テキストが入ります。テキストが入ります。
64          </div>
65        </div>
66      </section>
67      <section id="contact">
68        <div class="container p-md-5 p-4">
69              テキストが入ります。テキストが入ります。
70        </div>
71      </section>
72    </main>
73    <footer class="footer">
74      <nav class="nav-bar py-4 text-nowrap border-bottom">
75        <div class="container d-flex justify-content-between">
76          <ul class="nav small">
77            <li class="nav-item">
78              <a class="nav-link" href="#">ホーム</a>
79            </li>
80            <li class="nav-item">
81              <a class="nav-link" href="#company">企業情報</a>
82            </li>
83            <li class="nav-item">
84              <a class="nav-link" href="#contents">事業内容</a>
85            </li>
86            <li class="nav-item">
87              <a class="nav-link" href="#recruit">採用情報</a>
88            </li>
89            <li class="nav-item">
90              <a class="nav-link" href="#contact">お問い合わせ</a>
91            </li>
92          </ul>
93        </div>
94      </nav>
95      <div id="copyright">
96        <p class="text-center mb-0 pt-3 pb-3">&copy; 2022</p>
97      </div>
98    </footer>
99    <!-- JavaScript -->
100    <script src="js/jquery-3.6.1.slim.min.js"></script>
101    <script src="js/bootstrap.bundle.min.js"></script>
102    <script src="js/script.js"></script>
103  </body>
104</html>
105

CSS
1@charset "utf-8";
2.sp{
3    display: none;
4}
5.header{
6    position: fixed;
7    width: 100%;
8}
9.navbar-toggler .navbar-toggler-icon {
10    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
11}
12
13.mv {
14    position: relative;
15    z-index: -10;
16    }
17
18#companyName {
19    position: absolute;
20    top: 50%;
21    left: 50%;
22    -ms-transform: translate(-50%,-50%);
23    -webkit-transform: translate(-50%,-50%);
24    transform: translate(-50%,-50%);
25    margin:0;
26    padding:20px;
27    font-family: serif;
28    background-color: rgba(218, 224, 229, .3);
29    white-space: nowrap;
30    }
31    .mv img {
32    width: 100%;
33    }
34
35/*----------- レスポンシブ(スマホサイズ) ----------*/
36
37@media only screen and (max-width:767px){
38    .sp{
39        display: block;
40    }    
41}

JavaScript
1"use strict";
2
3$(function() {
4        // ヘッダーの高さ分、mainを下げる
5        const height=$("header").height();
6        $("main").css("padding-top", height);
7
8        // メニューを閉じる
9        $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
10        if(this.id != 'navbarDropdown'){
11                $('.navbar-collapse').collapse('hide');
12        }
13        });
14});

ちなみに、bootstrap4を使用しています。
よろしくお願いいたします。

回答1件

自己解決

解決しました。

    $('a[href^="#"]').click(function () {
        const headerHeight = $(".header").height();
        const speed = 600;
        let href = $(this).attr("href");
        let target = $(href == "#" || href == "" ? "html" : href);
        let position = target.offset().top - headerHeight;
        $("body,html").animate({ scrollTop: position }, speed, "swing");
        return false;
    });

投稿2022/09/08 06:06

iisaniisan

総合スコア75