【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法

当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の

[ricopinx]

　→合わせて読みたい。スクロール位置によってサイドバーを固定　http://mae.chab.in/archives/2282

[did2]

導入しようかな。それにしてもこの記事分かりやすくていいわぁ。

[sonesone]

一枚一枚紙芝居のようにスクロールして次の要素が現れてスクロールして・・・ってやつをこれでできそう。