「スクロール時に画面要素を固定」
ここではスクロール時に画面要素を固定する場合のhtmlの書き方を簡単にまとめてみます。
ただ単なる固定ならCSSの「position:fixed;」の要素を組み込むだけでヘッダーを固定できます。
html
<link rel="stylesheet" href="scroal.css">
<header class="site-header">
<h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1>
</header>
<div class="hero"><img src="hero.jpg" alt="hero"></div>
<div class="content">
<!--省略-->
</div>
css
.site-header{
position: fixed;
}
これで画面をスクロールしても「WEBDESIGNDAY」の文字が下にスクロールに合わせて動くようになります。
非常に簡素な説明ですがこれで終わります。
観覧ありがとうございました。