JS ページスクロール時のレイヤーのインテリジェントなフローティング位置決めの実装 (jQuery/MooTools)

JS ページスクロール時のレイヤーのインテリジェントなフローティング位置決めの実装 (jQuery/MooTools)_jquery

WBOY

リリース： 2016-05-16 18:03:08

オリジナル

1539 人が閲覧しました

1. アプリケーションの表示
レイヤーのスマートフローティング効果について、数年前に海外の一部の個人サイトの縦型ナビゲーションで見かけましたが、現在は国内の一部でもあるようです。この効果は、淘宝網の検索結果ページの並べ替えの水平バーなどでも頻繁に見られます。デフォルトの状態では、スクロールバーは次のようにページとともにスクロールします。
次の図に示すように、ページが下にスクロールするときに水平バーがブラウザの上端に触れると、水平バーは独立し、スクロールバーと一緒にスクロールしません。
淘宝网搜索页排序水平条张鑫旭-鑫空间-鑫生活

同様のエフェクトは新浪微博でも利用できます:
淘宝网搜索页水平条张鑫旭-鑫空间-鑫生活

ページがスクロールし、新しい動的プロンプトがブラウザウィンドウからフェードアウトし始めると、次の図に示すように、ブラウザウィンドウの上端にフロート表示されます。
新浪微博上智能定位层张鑫旭-鑫空间-鑫生活

この効果を実現する原理は実際には非常に簡単で、この記事ではその実装を示します。
新浪微博智能浮动层张鑫旭-鑫空间-鑫生活

2. 実装原則

位置決めは絶対的でも静的でも何もする必要はありません。。重要なのは、ブラウザがスクロールし、オブジェクト (フローティングするレイヤー) をブラウザインターフェイスのビューポートから削除する必要がある場合、オブジェクトがウィンドウの上端にフローティングして表示されるように、その位置属性を変更するだけであるということです。最適な位置属性は固定されており、IE6 やその他のブラウザーでフローティングレイヤーの位置をスムーズに固定できます。IE6 の以前のバージョンでは固定属性がサポートされていないため、代わりに絶対属性を使用します。ただし、副作用があります。 - スクロールがスムーズになりません。しかし、それについては何もすることができません。
ここで重要なのは、現在のレイヤーがブラウザウィンドウの上端に接しているかどうかをどのように判断するかということです。フローティングレイヤーがブラウザウィンドウの上端に接している場合、実際にはページの垂直オフセット値はページのスクロール高さと同じになりますので、これを使って判断しても大丈夫です。ページ上の要素とページ間の距離を取得するにはどうすればよいですか?純粋な JS コードでこの値を取得するのは依然として面倒ですが、幸いなことに、JavaScript ライブラリがこれらのタスクを解決するのに役立つため、以下では、jQuery ライブラリと MooTools ライブラリでこの効果を実現する方法を示します。

3. jQuery でのレイヤーのスマートフローティング

メソッドのコードは次のとおりです:

コードをコピー

コードは次のとおりです。 $.fn.smartFloat = function() { var Position = function(element) {

var top = element.position( ).top, pos = element.css("position");

$(window).scroll(function() { 
var スクロール = $(this).scrollTop(); 
if (スクロール > トップ) { 
if (window.XMLHttpRequest) { 
element.css({ 
位置: "固定", 
トップ: 0 
}); 🎜>} else { 
element.css({ 
top: スクロール 
}); 
} 
}else { 
element.css({ 
position: "絶対", 
 トップ: トップ 
}); 
} 
}); 
}; 
return $(this).each(function() { 
position($ (this)); 
}); 
}; 

 
呼び出しは 1 行のコードで十分です。例: 

$( "#float").smartFloat( ; スクロール バーに従わなくなります。 

ここをクリックできます: jQuery 下のレイヤーのスマートフローティングデモ

デモページを開くと、右側に恥ずかしがり屋のフローティングレイヤーが表示されます。ページをスクロールして効果を観察します。

4. MooTools でのレイヤーのスマートフローティング

jQuery 実装と同様に、このメソッドも MooTools ライブラリの下にパッケージ化されています。コードは次のとおりです:
jQuery智能浮动demo效果截图张鑫旭-鑫空间-鑫生活

コードをコピー

次のようにコードします:

 
var $smartFloat = function(elements) { 
varposition = function(element) { 
var top = element.getPosition().y, pos = element.getStyle("position") ; 
window.addEvent("scroll", function() { 
var スクロール = this.getScroll().y; 
if (スクロール > トップ) { 
if (window.XMLHttpRequest) { 
element.setStyles({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.setStyles({ 
top: スクロール) 
}); 
} 
}else { 
element.setStyles({ 
位置: "絶対", 
上: 最上位 
}); 🎜>}); 
}; 
if ($type(elements) === "array") { 
return elements.each(function(items) { 
position(items); 
}); 
} else if ($type(elements) === "element") { 
position(elements); 

 使用方法も非常に簡単で、たった 1 行のコードです。例として ID を float としたタグを取り上げます。コードは次のとおりです。 

$smartFloat($("float")); >ここをクリックできます：MooTools の下のレイヤーのスマート フローティング デモ 