position: stickyが機能しない

前提・実現したいこと

タイトルにある通り、要素を常に最上部に表示したいのですが、機能しません。

表示したいのは、header-titleです。

該当のソースコード

html
1<header class="header">
2        <div class="header-title">
3            <h1>Takuya Nemoto</h1>
4            <h2>Who Am I ?</h2>
5        </div>
6        <div class="header-logo">
7            <nav class="header-link">
8                <a href="#">Home</a>
9                <a href="#about">About</a>
10                <a href="#projects">Projects</a>
11            </nav>
12            <h2>Takuya Nemoto</h2>
13        </div>      
14    </header>

css
1html {
2  box-sizing: border-box;
3}
4
5*,
6*::before,
7*::after {
8  box-sizing: inherit;
9}
10
11:root {
12  --main-black: #1c1d25;
13  --main-white: rgb(245, 248, 244);
14  --main-blue: rgb(92, 143, 255);
15  --transition: all 0.5s ease;
16}
17
18body {
19  font-family: "Times New Roman", Times, serif;
20  margin: 0;
21  padding: 0;
22}
23
24/* header */
25
26.header {
27  position: relative;
28}
29
30.header-title {
31  position: sticky;
32  position: -webkit-sticky;
33  top: 0;
34  width: 100vw;
35  display: flex;
36  justify-content: center;
37  background-color: var(--main-black);
38  padding: 0.5rem;
39}
40
41.header-title > h1,
42.header-title > h2 {
43  color: white;
44  margin: 0;
45  padding-right: 3rem;
46  font-size: 1.875rem;
47}
48
49.header-title > h2 {
50  opacity: 0.7;
51  font-weight: 300;
52}

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

回答1件

ベストアンサー

提示のコードでposition: stickyは機能してますよ。

position: sticky は親要素内(提示のコードならheader)で指定位置に固定されるという意味なので、親要素が画面外にでたら一緒に移動します。提示のコードでは header の高さが小さいので気が付きにくいだけです。ためしに、header を500pxぐらいに設定するとheader内では固定されているが分かると思います。

親要素関係なく常に画面の最上部に固定したいなら、position: fixedにしてください。

投稿2021/03/23 06:56