Card image cap

2019/08/17 9:29

「スクロール時に画面要素を固定」

ここではスクロール時に画面要素を固定する場合の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」の文字が下にスクロールに合わせて動くようになります。

非常に簡素な説明ですがこれで終わります。

観覧ありがとうございました。