[JS]特定のエリアのみをスクロールしても同じ位置に表示するスクリプト

WebResourcesDepotのエントリーから、特定のエリアのみ(キャプチャの右のエリア)をスクロールしても、同じ場所に表示するスクリプトの紹介です。

aaa

Smart Floating Banners
デモ:1
デモ:2

スクリプトはjQueryをベースにしたもので、デモでは右に配置されたエリアの特定の一部のみをスクロールしても同じ場所に表示させています。

当サイトが配布している「Page Scroller(スムーズにスクロールするスクリプト)」と、同じ位置に表示するスクリプトの相性が悪い、というのをどこかのブログで見かけたのですが、これを使用すると特に問題無く実装できました。
Page Scrollerと合体させたデモ(「右パネルのtop」と「ページ下のtop」)

Page Scrollerは、「$」ではなく「$j」を使用なので、下記のように変更しています。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

Shoko

on 2011年9月1日

はじめまして。
こちらのサイトはいつも大変参考にさせていただいています。ありがとうございます。
こちらの記事に関して質問させてください。
「特定のエリアのみをスクロールしても同じ位置に表示するスクリプト」
サンプルでは、jQueryバージョン1.2.6 をご使用中ですが、1.4.2や、1.6.2などの新しいバージョンを使うと、メニューが固定できなくなってしまうようです。
解決策等ありましたらご教授いただけると助かります。
よろしくお願いします。

コリス

on 2011年9月1日

> Shoko さん

さすがに3年以上も前のものなので、そのまま使用するのは難しいと思います。

Shoko

on 2011年9月1日

なんどもすいません、試したところ、offset({ scroll: false })を、offset()と変更したところ、動きました。なぜ、scroll: falseをはずすと動くんでしょうか?謎です。。。

コリス

on 2011年9月1日

スクロールさせないための「scroll: false」なのに不思議ですね、、、

top of page

©2011 coliss