ヘッダーを固定したままスクロールを行いたい

フルスクリーン表示画面の下にヘッダーを配置しているのですが、
スクロールをした時にヘッダーがついてくるようにしたいです。
イメージとしては、フルスクリーンの箇所をスクロールし、
フルスクリーンの画像が見えなくなっていくのと同時に
ヘッダーが画面の一番上にきた状態のまま、
ヘッダー位置が固定されそこからは常にヘッダーを上部に見ながら
スクロールが可能な状態になるのを完成予想としています。

試したこと： cssのheader部分で、position:fixed、top:0、z-index:100などの
設定を行なってみましたが、フルスクリーン箇所の一番上にきてしまい、
うまくできませんでした。

※jQueryの基本知識はあるので、jQueryだとできるといったときも教えていただきたいです。

参考に完成イメージを添付いたしました。
よろしくお願いいたします。

添付画像①

添付画像②

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11    </head>
12    <body>
13        <div id="top-wrapper">
14            <div class="container">
15                <img class="top-logo" src="ダミーダミーダミー" alt="">
16            </div>
17        </div>
18        <header>
19            <div class="container header-flexbox">
20                <div><a href="ダミーダミーダミー"><img class="header-logo" src="ダミーダミーダミー" alt=""></a></div>
21                <nav>
22                    <ul class="nav-main">
23                        <li><a href="#">ダミーダミーダミー</a></li>
24                        <li><a href="#">ダミーダミーダミー</a></li>
25                        <li><a href="#">ダミーダミーダミー</a></li>
26                        <li><a href="#">ダミーダミーダミー</a></li>
27                    </ul>
28                </nav>
29            </div>
30        </header>
31        <article>
32            <div class="container">
33                <div class="message-text">
34                    <h1>タイトルが入りますタイトルが入ります</h1>
35                    <p>ダミーダミーダミー、</p><p>ダミーダミーダミー</p><p class="message-paddingTop">ダミーダミーダミー</p><p>ダミーダミーダミー、</p><p>ダミーダミーダミー。</p><p class="message-paddingTop">ダミーダミーダミー、</p><p>ダミーダミーダミー。</p><p class="message-paddingTop">ダミーダミーダミー、</p><p>ダミーダミーダミー、</p><p>ダミーダミーダミー、</p><p>ダミーダミーダミー。</p>
36                </div>
37            </div>
38        </article>
39    </body>
40</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22    padding: 0 4%;
23}
24#top-wrapper {
25    min-height: 100vh;
26    background-image: url(../images/index/top-bg.jpg);
27    background-size: cover;
28    background-position: center top;
29    background-repeat: no-repeat;
30}
31.top-logo {
32    position: absolute;
33    top: 50%;
34    left: 50%;
35    width: 20%;
36    -webkit-transform: translate(-50%, -50%);
37    -moz-transform: translate(-50%, -50%);
38    transform: translate(-50%, -50%);
39    z-index: 100;
40}
41header {
42    height: 80px;
43    width: 100%;
44    background-color: #f7f7f7;
45
46    /* このコメント部分をいろいろ試してみましたが、うまくできませんでした　position :fixed;
47    top: 0;
48    z-index: 100; */
49}  
50.header-flexbox {
51    display: flex;
52    justify-content: space-between;
53}
54.header-logo {
55    width: 55px;
56    margin-top: 13px;
57}
58.nav-main {
59    display: flex;
60    list-style: none;
61    margin-top: 27px;
62    font-size: 1rem;
63    text-transform: uppercase;
64}
65.nav-main li {
66    margin-left: 70px;
67    letter-spacing: 5px;
68}
69.nav-main a { 
70    color: black;
71    position: relative;
72    display: inline-block;
73}
74.nav-main a::after {
75    position: absolute;
76    bottom: -10px;
77    left: 0;
78    content: '';
79    width: 100%;
80    height: 1px;
81    background: #333;
82    transform: scale(0, 1);
83    transform-origin: right top;
84    transition: transform .3s;
85}
86.nav-main a:hover::after {
87    transform-origin: left top;
88    transform: scale(1, 1);
89}
90article {
91    height: 1050px;
92    background-image: url(../images/index/message-bg.jpg);
93    background-size: cover;
94    object-fit: cover;
95    display: flex;
96    justify-content: center;
97    padding-top: 90px;
98}
99.message-text {
100    color: black;
101    text-align: center;
102}
103.message-text h1 {
104    font-size: 26px;
105    letter-spacing: 5px;
106    font-weight: bold;
107    padding-bottom: 90px;
108}
109.message-text p {
110    font-size: 14px;
111    letter-spacing: 5px;
112    line-height: 2.5;
113    font-weight: normal;
114}
115.message-paddingTop {
116    padding-top: 40px;
117}

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

回答1件

ベストアンサー

position: sticky;を使えばどうでしょう。

css
1header {
2    height: 80px;
3    width: 100%;
4    background-color: #f7f7f7;
5    position: sticky;
6    top: 0;
7}

position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

投稿2020/12/16 10:06

hatena19

総合スコア34075

user20

2020/12/16 14:08

hatena19様ご回答いただき、誠にありがとうございます。無事、予想イメージ通りにできました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ヘッダーを固定したままスクロールを行いたい

関連した質問