【position:sticky】stickyイベントをjqueryで取得したい
兵庫県三田市でホームページ製作をしいているゴリラドットです。 「position:sticky」とっても便利ですよね。これまでjavascriptやjqueryでゴリゴリスクロールイベントを使って追従させてた部分がホントにcss一行「position:sticky」だけで実装できちゃうんだから。 ただ便利なものを使いだすとさらに欲が出てきて「んじゃposition:stickyが固定になったタイミングでイベントを取得してなんかちょっと半透明にしたり高さコンパクトにしたりしたい！」と思いますよね。つまりstickyイベントを取得したい、というケース。 というコトでここでは「position:sticky」のイベント発火をjqueryやjavascriptで検知してなんか処理する方法を紹介します。 そんなイベントはない いきなり「そんなぁ～…」という阿鼻叫喚が聞こえてきますが、残念ながらsti
HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」 – bl6.jp
sticky-itemsは指定したHTML要素をWebページの上部に付箋のように固定して表示させておくことができるjQueryプラグインです。スクロールダウンしても特定の要素を表示しておきたいというときに便利ですね。 sticky-itemsの実際のデモ動作は以下のページから確認できます。 デモ デモでは下へスクロールダウンしていくと「MAKE THIS HEADING STICKY!」と書かれた要素が画面上部に固定されます。 一般的にはスクロールダウンすることで見えなくなっていきますが、特定の要素だけユーザーに見えるようにしたい場合に役立つプラグインです。 また、デモはレスポンシブにも対応しているので、スマホからでも見やすいのがいいですね。試しにiPhoneで確認してみたところ、スクロールダウンしてもしっかり画面上部に固定されていました。 マークアップや使い方がとてもシンプルでわかりやす
scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介（脱jQuery）
当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript（jQuery）で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
