ホームページ ウェブフロントエンド jsチュートリアル jqueryはscreen上部までの表示範囲を超えるナビゲーションを自動的に修正する方法を実装します_jquery

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

May 16, 2016 pm 06:01 PM
ナビゲーション

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

$().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 フッター コードにコピーできます。フローティング ナビゲーションの幅に問題がある場合は、先ほど行った解決策を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フットボール ナビゲーション音声パッケージはどのナビゲーション ソフトウェアに含まれていますか? フットボール ナビゲーション音声パッケージはどのナビゲーション ソフトウェアに含まれていますか? Nov 09, 2022 pm 04:33 PM

「Amap Navigation」ソフトウェアのサッカーナビゲーション音声パッケージは、自動車版Amapマップのナビゲーション音声パッケージの1つで、コンテンツは黄建祥選手のサッカー解説バージョンのナビゲーション音声です。設定方法: 1. Amap ソフトウェアを開きます; 2. クリックして「その他のツール」-「ナビゲーション音声」オプションに入ります; 3. 「Huang Jianxiang Passionate Voice」を見つけて「ダウンロード」をクリックします; 4. ポップアップページでをクリックし、「音声のみを使用する」をクリックします。

百度地図アプリ最新バージョン18.8.0リリース、信号機レーダー機能を初導入、リアルタイム駐車推奨機能を追加 百度地図アプリ最新バージョン18.8.0リリース、信号機レーダー機能を初導入、リアルタイム駐車推奨機能を追加 Aug 06, 2023 pm 06:05 PM

Android 版と iOS 版の百度地図アプリは、業界に先駆けて信号機レーダー機能を初めて導入したバージョン 18.8.0 をリリースしました。公式の紹介によると、信号機レーダーをオンにした後、自動検出をサポートします目的地を入力することなく、運転中に信号機の位置を確認できます。北斗高精度はリアルタイムで位置を測ることができます。全国の 100 万台以上の信号機で、自動的に青信号リマインダーがトリガーされます。さらに、この新機能は完全なサイレントナビゲーションも提供し、地図エリアがより簡潔になり、重要な情報が一目で明確になり、音声ブロードキャストがないため、ドライバーは運転にさらに集中できるようになります。 2020年10月 リアルタイムカウントダウン予測に対応 信号交差点に近づくとナビが自動的にカウントダウンの残り秒数を表示し、常に前方の道路状況を把握できるようになりました。 2022 年 12 月 31 日までの信号カウントダウン

ナビの地図にある横8の字は何ですか? ナビの地図にある横8の字は何ですか? Jun 27, 2023 am 11:43 AM

ナビゲーション マップ上の水平の数字 8 は霧を意味し、中程度は黄色の 8 警告信号、重度はオレンジ 8 の警告信号を意味します。

Amap、運転ETAサービスのアップグレード版を開始:現在の道路状況のリアルタイム分析とより正確な到着予想時刻 Amap、運転ETAサービスのアップグレード版を開始:現在の道路状況のリアルタイム分析とより正確な到着予想時刻 Apr 30, 2024 am 08:37 AM

4月29日の当サイトのニュースによると、Amapは運転ETAのアップグレード版の開始を正式に発表した(当サイト注:ETAとは到着予定時刻であり、ユーザーが出発するまでにかかる推定時間を指す) )サービスは、ユーザーがより正確にルートを計画し、所要時間と交通状況を推定し、旅行の決定を支援することを目的としています。この地図アプリケーションは、最新のアップグレードされた Amap アプリケーションであり、「超大規模グラフ畳み込みニューラル ネットワーク モデル」が導入されており、交通の流れのパターンをより適切に捕捉して学習し、都市の道路網と高速道路システムをサポートし、時空間を正確に描写できます。交通状況の動的な変化。さらに、新しいバージョンのマップでは、iTransformer 時系列予測モデルがさらに統合され、リアルタイム分析がサポートされます。

uniappでページジャンプとナビゲーションを実装する方法 uniappでページジャンプとナビゲーションを実装する方法 Oct 20, 2023 pm 02:07 PM

uniapp でページ ジャンプとナビゲーションを実装する方法。uniapp は、ワンタイム コーディングとマルチエンド パブリッシングをサポートするフロントエンド フレームワークです。Vue.js に基づいています。開発者は、uniapp を使用してモバイル アプリケーションを迅速に開発できます。 uniapp では、ページ ジャンプとナビゲーションの実装は非常に一般的な要件です。この記事では、uniapp でページジャンプとナビゲーションを実装する方法と、具体的なコード例を紹介します。 1. ページジャンプ uniapp が提供するメソッド群を利用してページをジャンプします。

Vue を介して画像の閲覧とサムネイル ナビゲーションを実装するにはどうすればよいですか? Vue を介して画像の閲覧とサムネイル ナビゲーションを実装するにはどうすればよいですか? Aug 18, 2023 pm 02:51 PM

Vue を介して画像の閲覧とサムネイル ナビゲーションを実装するにはどうすればよいですか? Web アプリケーションの発展に伴い、写真は私たちの日常生活においてますます重要な役割を果たしています。多くの場合、画像の閲覧やサムネイルのナビゲーション機能を実装する必要があります。この記事では、Vue フレームワークを使用してこの機能を実装する方法とコード例を紹介します。 Vue では、Vue プラグインを使用して画像の閲覧やサムネイル ナビゲーション機能を実装できます。人気のあるプラグインは vue-gallery で、シンプルで使いやすいインターフェイスを提供します。

PHP と XML を使用して Web ページのナビゲーションとメニューを実装する PHP と XML を使用して Web ページのナビゲーションとメニューを実装する Aug 07, 2023 am 11:34 AM

PHP と XML を使用して、Web ページのナビゲーションとメニューを実装します。ナビゲーションとメニューは Web ページの一般的な要素です。これらにより、ユーザーは必要な情報や機能をすばやく見つけることができます。 Web 開発では、ナビゲーション データとメニュー データの処理と保存に PHP と XML がよく使用されます。この記事では、PHP と XML を使用して Web ページのナビゲーションとメニューを実装する方法を紹介し、関連するコード例を示します。 1. XML メニュー データ ファイルを作成する まず、メニュー データを保存するための XML ファイルを作成する必要があります。以下は XML ファイルの例です。

Baidu 地図のナビゲーション画面を常にオンに設定する方法 Baidu 地図のナビゲーション画面を常にオンに設定する方法 Apr 01, 2024 pm 06:22 PM

Baidu Map は、多くの友人が外出時に使用しています。最速のルートを提供し、さまざまな移動方法も確認できます。ナビゲーション画面の定数を設定したい場合は、PHP 中国語 Web サイトにアクセスして、編集者が提供したメソッドを確認してください。 Baidu Map でナビゲーション画面を表示し続けるように設定する方法: 1. まず、携帯電話で Baidu Map APP をクリックして開き、ページの左上隅にある [個人アバター] をクリックして開きます。 2. パーソナル センター ページに移動したら、[設定] 機能を見つけてクリックしてに入ります。 3. 次に、設定ページの[一般設定]項目をクリックして入力します。 4. 一般設定ページに[画面を常にオン]機能があり、その後ろに切り替えボタンが表示されますので、円形のスライダーをクリックしてボタンをオンに設定します。

See all articles