teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

サンプルリンク追加

2021/03/09 01:08

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,3 +1,32 @@
1
1
  今なら、position: sticky; を使えば、jQueryなしに同様のことが実現できます。
2
2
 
3
- [position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス](https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html)
3
+ [position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス](https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html)
4
+
5
+ HTML構造を少し変更して、CSSを2行追加するだけです。
6
+
7
+ ```html
8
+ <div class="corona">
9
+ <a href="#modal-01">新型コロナウイルス対策について
10
+ </a>
11
+ </div>
12
+ <nav class="global-nav">
13
+
14
+ </nav>
15
+ <header class="site-header">
16
+
17
+ </header>
18
+ <main>
19
+ </main>
20
+ ```
21
+ ```css
22
+ .global-nav {
23
+ background: rebeccapurple;
24
+ height: 55px;
25
+ display: flex;
26
+ opacity: 0.7;
27
+ position: sticky; /* 追加 */
28
+ top: 0; /* 追加 */
29
+ }
30
+ ```
31
+
32
+ [CodePenサンプル](https://codepen.io/hatena19/pen/ExNdeXG)