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[デモを試してください]
