position: sticky;の仕組みや実際の使い方をやさしく解説
position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky
【JavaScript】上にスクロールするとにゅっと出てくるメニューを作る at softelメモ
問題 長い画面で、メニューや検索フォームなどが、近くにいて欲しいんだけど、いつも見えると邪魔。 下へ下へスクロールしてみているときは隠れていて、 上にスクロールすると出てくるメニューを作りたい。 答え stickyな動きは、CSSで可能。 普段はスクロールとともに上に隠れて行って欲しいので、必要なだけtopを引いておきたいのだが、 JavaScriptで測って、JavaScriptでtopのマイナスを入れるので、今回は書かなくてOK。 「にゅっ」っとした感じを出したいので、CSSのtransitionを設定しておく。 .sticky-menu { position:sticky; top:0; transition:.5s; } 上にスクロールしたことを検出して、topを0に戻したり、 下にスクロールしたことを検出して、topを必要なだけ引いたりする処理は、こんな感じ。 $(functio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
