備忘録ブラウザがどんどん新しくなっていく昨今。以前はjQueryを使っていたような事も、CSSだけで対応可能になってきましたね!最近わたしが使うようになったCSSで、position:sticky;という便利なものがあるので、まだ知らない人にご紹介したいと思います。『position:sticky;』で何ができるの?普段jQueryなどで実装している、『特定の位置まで画面をスクロールしたらそれ以降ずっと追従してくれるコンテンツ』をCSSだけで気軽に作ることが可能です。『position:sticky;』の使い方スクロールに追従させたい要素に対して、以下の指定をすればOKです。15px;はお好みで。left)のどれかを指定すればOKです。デモデモページはこのサイトです。PCで見たとき、サイドバーにくっついてくる要素があると思います。対応状況は上記の通りです。use...IEやEdgeなどの未対応ブラウザには『stickyfill』というスクリプトもあるようですが、私は「未対応ブラウザにはついてこなくてOK」という時にしか使わないので使用したことはありません。精神的にラクなのがposition:sticky;のメリットだと思っているので。ついてこないときは以下を確認してみてください。親要素にposition:relative;しているか祖先や親要素にoverflow:hidden;またはoverflow:auto;していないか自分自身にtop:15px;など、位置の指定をしているかtable要素に使用していないか(FireFoxなどでのバグですが使わない方が無難です)さいごにというわけで、『jQueryいらず!スクロールについてくるCSS『position:sticky;』の使い方と、ついてこない時の対処法』でした!ブラウザ対応状況があんな感じなので、おもに当サイトのようなブログのサイドバーでの使用がオススメです。ヘッダー+グローバルメニューを追従させるのも良いかも。@xxmiz0rexx前の記事へ新着記事を読む次の記事へこんな記事も読まれていますIE6にも対応させました!スクロールしてもついてくるソーシャルボックスCSS3備忘録:疑似クラスを使ってtableの最後の縦列をborderで囲む方法アニメーションで矢印がクルっと回転するナウでシンプルなドロップダウンメニューの作り方スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。数年前Sassに手を出してからそのまま使い続けている人に朗報。2017年、ナウで便利なSass環境はコレだッ!!という本が出たよ。一息...そうだ、ネタ記事読もう。すしぱくさんに名指しされたのでウェビメモ管理人みぞれの1日のタイムスケジュールを晒します。【ウェザーリポート】利根川水系ダムが水不足と聞いて雨乞いしてきた【発動】ビンタおねだりされてフイタw可愛いクマと仲良くお話できるアプリ『クマ・トモ』で遊んでみたよ!おなかへったな...そうだ、カフェ記事読もう。[ハワイ特集]プリプリのロブスターとジューシーな牛フィレ肉が美味しい!!ハワイのおもしろ鉄板焼き『田中オブ東京』パンケーキ激戦区の原宿でひときわ輝く新星『レインボーパンケーキ』に行って来た!最高さしかない。MeフリーランスWebデザイナー兼雨女。iOSアプリ・アイコンデザインなどを請け負ってます。ガーリーなフリー写真素材サイト始めました。食べたRankingDropboxに保存したhtmlファイルをiPhoneで閲覧する方法メモ。備忘録:Gmailで受け取った内容をGoogleスプレッドシートに自動で読み込んで管理する方法まだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ?と思ったので試してみたよ。