要素が見えてからCssでの固定

Question

前提・実現したいこと

CSSとHTMLについての質問です。

Appleさんのサイトみたいに、要素koteiが見えるところまでスライドしたときに一番上に固定するようにしたいです。

初心者なのでまだよくわからないので。
お願いします。

.kotei {
position: fixed; /* 要素を固定する */
top: 0; 
left: 0; 

}

<div class='kotei'>

ここを固定

</div>

Comments

[m.ts10806]

Appleさんのサイトが何か分からないのでなんとも。
百聞は一見にしかずという言葉をご存じでしょうか？

Answer 1

position: stickyを使用して下さい。

サンプル → https://jsfiddle.net/gpyvqcsw/

そして意外と質問文内にある単語の「要素　スライド　固定」を拾ってgoogleで検索してみると一番上にposition: stickyの記事が出てきたりします。
他にも「要素　途中から固定」等でもヒットします。

何気にcssって専門用語とかじゃなくても、やりたい事を感覚的に検索してみるだけで結構ヒットしたりするんですよね、ぜひ今後活用してみてくださいませ。

Answer 2

ありがとうございます
助かります
そういう風に検索するといいんですね☺参考にさせていただきます。