jQueryを使ったマッシャブル浮動エフェクトの例
Mashable
は、ユーザーがページをスクロールしている間に素晴らしい浮動効果を作り出しました。 jQueryを使ってこの浮動エフェクトを複製する方法を簡単に説明します。
アイデア…
-
フローティングボックスを作成します.
-
フローティングボックスの位置を最初に設定し、ボディコンテンツの横に置きます.
-
ユーザーがページをスクロールしている間は、スクロールバーの位置を確認してください.
-
スクロールバーのyの位置がフローティングボックスyより大きい場合
位置、フローティングボックスyの位置を動的に変更します。
-
スクロールバーyの位置はフローティングボックスyより小さい
位置、元の位置を復元します。
-
もちろん、jQueryを使用してください.
1. HTMLレイアウト
シンプルなHTMLレイアウト、ヘッダー、コンテンツ、およびフッターは、コンテンツの上にdivの「フローティングボックス」を配置します。
<div id="page"> <div id="header"><h1>header</h1></div> <div id="floating-box"></div> <div id="body"> <h1>content</h1> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2836379775501347" data-ad-slot="8821506761" data-ad-format="auto" data-ad-region="mkyongregion"></ins> <script> (adsbygoogle = window.adsbygoogle ||[]).push({}); </script><h2>Mashable floating effect example</h2> </div> <div id="footer"><h1>footer</h1></div> </div>
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 }); }
自分で試してみてください
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> #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; } #page{ width:800px; margin:0 auto; } #header{ border:1px solid blue; height:100px; margin:8px; } #body{ border:1px solid blue; height:2400px; margin:8px; } #footer{ border:1px solid blue; height:100px; margin:8px; } h1,h2{ padding:16px; } </style> </head> <body> <div id="page"> <div id="header"><h1>header</h1></div> <div id="floating-box"> </div> <div id="body"> <h1>content</h1> <h2>Mashable floating effect example</h2> </div> <div id="footer"><h1>footer</h1></div> </div> <script type="text/javascript"> //avoid conflict with other script $j=jQuery.noConflict(); $j(document).ready(function($) { //this is the floating content var $floatingbox = $('#floating-box'); if($('#body').length > 0){ var bodyY = parseInt($('#body').offset().top) - 20; var originalX = $floatingbox.css('margin-left'); $(window).scroll(function () { var scrollY = $(window).scrollTop(); var isfixed = $floatingbox.css('position') == 'fixed'; if($floatingbox.length > 0){ $floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); 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 }); } } }); } }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-Mashable-floating-effect-example.html[デモを試してください]