jQueryを使用したマッシュ可能なフローティングエフェクトの例
ソーシャルメディアリソースのWebサイトとして最もよく知られているMashableは、ユーザーがページをスクロールしているときに素晴らしいフローティング効果を生み出しました。 このフローティング効果をjQueryで複製する簡単なアイデアを次に示します。
アイデア…
-
フローティングボックスを作成します。
-
フローティングボックスの位置を初期化し、ボディコンテンツの横に配置します。
-
ユーザーがページをスクロールしている間、スクロールバーの位置を確認し続けます。
-
スクロールバーのy位置がフローティングボックスのy位置よりも大きい場合、フローティングボックスのy位置を動的に変更します。
-
スクロールバーのy位置がフローティングボックスのy位置よりも小さい間、元の位置に戻します。
-
もちろん、jQueryを使用します。
1. HTMLレイアウト
シンプルなHTMLレイアウト、ヘッダー、コンテンツ、フッターは、コンテンツの上にdivの「フローティングボックス」を配置します。
header
content
Mashable floating effect example
2. フローティングボックス90×200
これは、人々がボックスをスクロールしている間、スムーズにフロートするボックスです。 必要に応じて、“margin-left:-100px; "を少し調整する必要がある場合があります。
#floating-box{ width:90px; height:200px; border:1px solid red; background-color:#BBBBBB; float:left; margin-left:-100px; margin-right:10px; position:absolute; z-index:1; }
3. 競合はありません
jQueryが他のライブラリと競合していないことを確認してください。 確認することを強くお勧めします。
//avoid conflict with other script $j=jQuery.noConflict(); $j(document).ready(function($) {
4. 位置、位置、位置
jQuery scroll()イベントをバインドして、ブラウザーのスクロールバーの位置を確認し続けます。
$(window).scroll(function () { var scrollY = $(window).scrollTop(); var isfixed = $floatingbox.css('position') == 'fixed'; if($floatingbox.length > 0){ if ( scrollY > bodyY && !isfixed ) { $floatingbox.stop().css({ position: 'fixed', left: '50%', top: 20, marginLeft: -500 }); } else if ( scrollY < bodyY && isfixed ) { $floatingbox.css({ position: 'relative', left: 0, top: 0, marginLeft: originalX }); } } });
スクロールバーのy位置がフローティングボックスのy位置よりも大きい場合は、フローティングボックスのy位置を「marginLeft: -500」に変更します。 必要に応じてこの値をカスタマイズする必要がある場合があります。
if ( scrollY > bodyY && !isfixed ) { $floatingbox.stop().css({ position: 'fixed', left: '50%', top: 20, marginLeft: -500 }); }
スクロールバーのy位置がフローティングボックスのy位置よりも小さい場合、元の位置に戻します。
if ( scrollY < bodyY && isfixed ) { $floatingbox.css({ position: 'relative', left: 0, top: 0, marginLeft: originalX }); }
5. Done
以下の例を再生して、作品のアイデアをつかんでください。
P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.