jqueryはscreen上部までの表示範囲を超えるナビゲーションを自動的に修正する方法を実装します_jquery

実際、実装は難しくありません。まず、ナビゲーションが表示範囲内にある場合は、修正する必要はありません。ナビゲーションが表示範囲を超える場合、つまりナビゲーションと画面上部の間の距離が 0 未満の場合は、ナビゲーションを画面上部にフロートさせる必要があります。それが 0 より大きい場合は、復元操作を実行するのは非常に簡単です。バー

をコピーします。 コードは次のとおりです。

$().ready (function(){

//画面上部からのナビゲーション距離
var _defautlTop = $(" #navigator").offset().top - $(window).scrollTop();
//画面の左側からのナビゲーション距離
var _defautlLeft = $("#navigator").offset( ).left - $(window).scrollLeft();
//初期スタイルを復元するときに必要なナビゲーションのデフォルト スタイル レコード
var _position = $("#navigator").css('position');
var _top = $("#navigator").css('top');
var _left = $(" #navigator").css('left');
var _zIndex = $( "#navigator").css('z-index');
//マウススクロールイベント
$(window) .scroll(function(){
if($(this).scrollTop() > _defautlTop){
//IE6 はposition:fixed を認識しません。
if($.browser.msie && $.browser.version=="6.0"){
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop) ,'left':_defautlLeft,'z-index':99999}); 🎜>//ジッターを防ぐ
$("html,body").css({'background-image':'url(about :blank)','background-attachment':'fixed'}); >}else{
$("#navigator").css({'position':'fixed','top':0 ,'left':_defautlLeft,'z-index':99999}); >}
}else{
$("#navigator").css({'position':_position,'top' :_top,'left':_left,'z-index':_zIndex});
}
});
});


特に言うことはありませんが、IE6 はposition:fixed を認識しないので、position を使用する必要があることに注意してください。 :absolute を使用してシミュレーションし、top の値をリアルタイムで計算します。さらに、スクロール時のジッターを防ぐために 2 つのスタイルを追加する必要があります。具体的には、「IE6 のバグに対する完璧な解決策」を参照してください。位置:固定はサポートされていません。」

もう 1 つの注意点は、ナビゲーションの幅は固定値である必要があることです。固定値や絶対値は認識されないため、自動または 100% にすることはできません。もちろん、手動で幅を取得することもできます。ナビゲーション スタイルでは、元のナビゲーション スタイルでは、position: 相対値を設定できないという前提があります。

上記のコードは、バックグラウンドで設定されている HTML フッター コードにコピーできます。フローティング ナビゲーションの幅に問題がある場合は、先ほど行った解決策を参照してください。