スクロールして画面上部に来たら固定されるサイドバー

前提・実現したいこと

htmlとCSS、Bootstrap4などを使ってwebページを作っています。
Bootstrap4でメニューバーを画面上部に固定できるようにしました(Sticky-top)。
サイドバーも、メニューバーの直下についてきて画面上部に達したところで固定したいです。

発生している問題・エラーメッセージ

1.</nav>の上の行に<div class="sidemenu"> ~ </div>の部分を入れると、サイドバーの横に大きな空白が出来てしまい、
2.CSSでposition:fixed;で固定するとスクロールについて来ずメニューバーとの間に隙間が生じてしまいます。
下のソースコードは2を試したときのものです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width">
7    <link rel="stylesheet" href="contact.css">
8    <!--CSS ライブラリ-->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
10    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css">
11    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">
12    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css">
13    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css">
14  </head>
15<body>
16    
17        <header id="header"><!--ヘッダー画像-->
18            <img src="" alt="Contact to us">
19            <br>a</br><br>a</br><br>a</br>
20        </header>
21        <nav class="navbar sticky-top navbar-light bg-white"><!--トップメニュー--><!--重要なリンクへ飛ばすnav-->
22            <div class="dropdown">
23                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
24                    aria-expanded="false">
25                    Home
26                </button>
27                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
28                    <li class="dropdown-item">
29                        <a href="#">a</a>
30                    </li>
31                    <li class="dropdown-item">
32                        <a href="#">b</a>
33                    </li>
34                    <li class="dropdown-item">
35                        <a href="#">c</a>
36                    </li>
37                    <li class="dropdown-item">
38                        <a href="#">d</a>
39                    </li>
40                    <li class="dropdown-item">
41                        <a href="#">e</a>
42                    </li>
43                    <li class="dropdown-item">
44                        <a href="#">f</a>
45                    </li>
46                </div>
47            </div>
48            <div class="dropdown">
49                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
50                    aria-expanded="false">
51                    A
52                </button>
53                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
54                </div>
55            </div>
56            <div class="dropdown">
57                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
58                    aria-expanded="false">
59                    B
60                </button>
61                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
62                </div>
63            </div>
64            <div class="dropdown">
65                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
66                    aria-expanded="false">
67                    C
68                </button>
69                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
70                </div>
71            </div>
72            <div class="dropdown">
73                <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
74                    aria-expanded="false">
75                    D
76                </button>
77                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
78                </div>
79            </div>
80            <div class="dropdown">
81                <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
82                    aria-expanded="false">
83                   E
84                </button>
85                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
86                </div>
87            </div>
88        </nav>
89        <div class="wholearea">
90        <div class="area" ><!--コンテンツ-->
91            <div class="sidemenuboad">
92            <div class="sidemenu"><!--サイドメニュー-->
93                <div class="col-2">   
94                    <section class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
95                        <table border="1" width="100%" table frame="void">
96                            <input class="button1" type="button" value="A">
97                            <input class="button1" type="button" value="B">
98                            <input class="button1" type="button" value="C">
99                            <input class="button1" type="button" value="D">
100                            <input class="button1" type="button" value="E">
101                            <input class="button1" type="button" value="F">
102                            <input class="button1" type="button" value="G">
103                            <input class="button1" type="button" value="H">
104                        </table>
105                    </section>
106                </div>
107            </div></div>
108            <div class="contents"><!--メインコンテンツー-->
109                <div class="col-10">
110                <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
111                <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
112                <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
113                </div>
114            </div>
115        </div>
116
117    </div>
118            <footer class="footer"><!-- フッター -->
119            <div>
120                <p>aaaaaaaaaaaaa
121           </div>
122        </footer>
123   </body>
124
125</html>
126

CSS
1@charset "utf-8";
2
3body {
4  width: 100%;
5  background-color:#FFF;
6  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
7  color:#000;
8}
9
10header {
11  position:relative;
12  text-align:center;
13  overflow:visible;
14  width:960px;
15  margin:0 auto;
16}
17.wholearea{
18  width:960px;
19  margin:0 auto;
20  overflow:hidden;
21}
22/*-----メニューバーの設定-----*/
23nav:first-of-type {/*メニューバーら辺*/
24  text-align:center;
25  width:960px;
26  margin:0 auto;
27  border-bottom:3px double black;
28  margin:10px auto 15px auto;
29}
30.dropdown:hover > .dropdown-menu{
31  display:block;
32}
33/*-----サイドメニューエリアの設定-----*/
34.sidemenuboad{
35  width:20%;
36  float:right;
37  background-color:rgb(181, 240, 240);
38  padding-bottom: 32767px;
39  margin-bottom: -32767px;
40}
41/*-----サイドメニューバーの設定-----*/
42.sidemenu{
43  height:300px;
44  background-color:rgba(255, 255, 255,0);
45  position:fixed;
46}
47.sidemenu [type="button"]{
48  background-color:rgb(241, 197, 147);
49  margin:5px 5px 0 5px;
50  padding:2px 5px;
51  width:150px;
52  height:30px;
53  text-align:center;
54  display:inline-block;
55  color:rgb(0, 0, 0);
56  border-radius:5px;
57} 
58.sidemenu [type="button"]:hover{
59  background-color:rgb(227, 230, 32);
60}
61/*-----メインエリアの設定-----*/
62.contents{
63  width:80%;
64
65  float:left;
66  background-color:rgb(247, 236, 179);
67  overflow-wrap : break-word;
68  padding-bottom: 32767px;
69  margin-bottom: -32767px;
70}
71/*-----フッターの設定-----*/
72.footer {
73  clear:both;/*回り込み解除*/
74  width:100%;
75  border-top:10px solid #000;
76  text-align:center;
77}
78.footer div p {
79  font-size:0.7em;
80  line-height:2.0em;
81}

行動規範の内容に同意します

回答1件

ベストアンサー

参考サイト

上記サイトにこういう記述がありました。
・親要素（サイドバー）の高さをメインコンテンツと揃える必要があります。table-cellやfloatでレイアウトしていると上手く動作しない場合があります
・親や先祖要素にoverflow: hidden(scroll, auto)が使われていると上手く動作しません

修正した部分のみです

CSS
1
2.wholearea{
3  width:960px;
4  margin:0 auto;
5  /*overflow:hidden 削除 別調整が必要*/;
6}
7
8/*-----サイドメニューエリアの設定-----*/
9.sidemenuboad{
10  order: 2;/*追加*/
11  width:20%;
12  /*float:right;削除*/
13  background-color:rgb(181, 240, 240);
14  padding-bottom: 32767px;
15  margin-bottom: -32767px;
16}
17/*-----サイドメニューバーの設定-----*/
18.sidemenu{
19  height:300px;
20  background-color:rgba(255, 255, 255,0);
21  position:sticky;
22  top:60px;
23  
24}
25/*-----メインエリアの設定-----*/
26.contents{
27  width:80%;
28  order: 1;/*追加*/
29  /*float:left; 削除 */ 
30  background-color:rgb(247, 236, 179);
31  overflow-wrap : break-word;
32  padding-bottom: 32767px;
33  margin-bottom: -32767px;
34}
35
36.area{
37  display:flex;
38}