アンカーポイント使用時のトップフローティングDIVの高さ占有問題の解決方法_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script language=javascript src="http://www.0551jia.cn/js/jquery1.42.min.js"></script><title>测试</title><style type="text/css">* {color:#fff;}.clear { clear:both; height:0; line-height:0px; font-size:0;}#ding{position:fixed;z-index:100; background-color:#036; top:0;left:0;_position:absolute;_top:expression(documentElement.scrollTop + 0 + "px");_left:expression(documentElement.scrollLeft + 0 + "px");} #ding{width:100%;overflow:hidden; height:56px; text-align:center}.logo { background-color:#eee; height:70px; border-bottom:#d8d8d8 1px solid; margin-bottom:3px;}.navbox{ width:1100px; margin:0 auto; z-index:998;}.navboxfix{ position:fixed; left:50%; margin-left:-550px; width:1100px;top:56px; _position:relative;}.navbox {height:36px; line-height:36px; background-color:#484441; color:#FFF}.navbox dd a{display:block;width:134px; float:left; text-align:center; color:#fff}.k {height:800px; background-color:#069;}.b {height:800px; background-color:#393}</style></head><body><div id="ding"> 固定的顶 </div><div class="clear" style="height:56px;"></div><div class="logo wk cent"> 中间</div><div class="navbox"> <dl style="position:inherit"> <dd><a href="#kk1">这是1</a></dd> <dd><a href="#kk2">这是2</a></dd> <dd><a href="#kk3">这是3</a></dd> <dd><a href="#kk4">这是4</a></dd> <dd><a href="#kk5">这是5</a></dd> </dl></div><div class="k"><a name="kk1" id="kk1"></a>这是一</div><div class="b"><a name="kk2" id="kk2"></a>这是二</div><div class="k"><a name="kk3" id="kk3"></a>这是三</div><div class="b"><a name="kk4" id="kk4"></a>这是四</div><div class="k"><a name="kk5" id="kk5"></a>这是五</div><script type="text/javascript">var sft=$(".navbox").offset().top-56; //顶部固定DIV function shownav(){ var s_t= document.documentElement.scrollTop || document.body.scrollTop; if(s_t>sft){ $(".navbox").addClass("navboxfix") } else{ $(".navbox").removeClass("navboxfix") } }window.onscroll=shownav;</script></body></html>
ディスカッションへの返信(解決策)
参考:
HTMLアンカーをオフセットして固定ヘッダーに合わせて調整する
JQuery Position:Fixed 'NAVBAR' by Screeningページ
give 純粋な CSS で実装された次のスタイルをアンカー ポイントに追加します。
a.anchor{ display: block; position: relative; top: -92px; visibility: hidden;}さらに、スムーズなスクロール効果を追加する必要がある場合は、クリックして
オンライン デモンストレーションの結果
またはオンライン デモ コード を表示できます
後で使用するために実際の効果のアドレスを保存してください
ありがとうございました熱心なご返事をいただきました！ ！ ！
参考:
HTML アンカーをオフセットして固定ヘッダーを調整する
JQuery Position:ページをスクロールすることで「NAVBAR」を固定する
純粋な CSS で実装された次のスタイルをアンカー ポイントに追加します。
すごいです
さらに、スムーズなスクロール効果を追加する必要がある場合は、クリックして
オンライン デモンストレーション結果
またはオンライン デモ コード
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7470
15
1377
52
77
11
19
29
Win11システムに中国語言語パックをインストールできない問題の解決策
Mar 09, 2024 am 09:48 AM
Win11 システムに中国語言語パックをインストールできない問題の解決策 Windows 11 システムの発売に伴い、多くのユーザーは新しい機能やインターフェイスを体験するためにオペレーティング システムをアップグレードし始めました。ただし、一部のユーザーは、アップグレード後に中国語の言語パックをインストールできず、エクスペリエンスに問題が発生したことに気づきました。この記事では、Win11 システムに中国語言語パックをインストールできない理由について説明し、ユーザーがこの問題を解決するのに役立ついくつかの解決策を提供します。原因分析 まず、Win11 システムの機能不全を分析しましょう。
SteamエラーコードE20の解決方法
Feb 19, 2024 pm 09:17 PM
Steam を使用してゲームをダウンロード、アップデート、またはインストールすると、さまざまなエラーコードが頻繁に発生します。その中でよくあるエラーコードはE20です。このエラー コードは通常、Steam クライアントがゲームを更新しようとして問題が発生していることを意味します。ただし幸いなことに、この問題を解決するのはそれほど難しくありません。まず、エラー コード E20 を修正するには、次の解決策を試してください。 1. Steam クライアントを再起動します: Steam クライアントを直接再起動すると、この問題が解決できる場合があります。 Steam ウィンドウ内
Black Shark携帯電話の電源が入らない問題を解決する方法を教える5つのヒント!
Mar 24, 2024 pm 12:27 PM
スマートフォン技術が発展し続けるにつれて、携帯電話は私たちの日常生活においてますます重要な役割を果たしています。 Black Shark フォンは、ゲーム パフォーマンスに重点を置いたフラッグシップ フォンとして、プレイヤーから高い支持を得ています。ただし、場合によっては、Black Shark 携帯電話の電源が入らないという状況にも直面するため、この問題を解決するために何らかの措置を講じる必要があります。次に、Black Shark 携帯電話の電源が入らない問題を解決する方法を説明する 5 つのヒントを共有しましょう: ステップ 1: バッテリー残量を確認する まず、Black Shark 携帯電話に十分な電力があることを確認します。携帯電話のバッテリーが消耗している可能性があります
このデバイスにドライバーをロードできません。解決するにはどうすればよいですか? (個人的にテスト済みで有効です)
Mar 14, 2024 pm 09:00 PM
コンピューターがドライバーを読み込めない場合、デバイスが正しく動作しないか、コンピューターと正しく対話できない可能性があることは誰もが知っています。では、このデバイスにドライバーをロードできないことを示すプロンプト ボックスがコンピューターに表示された場合、問題を解決するにはどうすればよいでしょうか?以下のエディタでは、問題を簡単に解決する 2 つの方法を説明します。このデバイスにドライバーをロードできません 解決策 1. スタート メニューで「カーネル分離」を検索します。 2. メモリの整合性をオフにします。上記のメッセージには、「メモリの整合性がオフになっています。デバイスは脆弱である可能性があります。」というメッセージが表示されます。戻るボタンをクリックして無視してください。使用には影響しません。 3. マシンを再起動すると、問題が解決することがあります。
小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか?投稿時に自動保存された画像はどこにありますか？
Mar 22, 2024 am 08:06 AM
ソーシャルメディアの継続的な発展に伴い、Xiaohongshu はますます多くの若者が自分たちの生活を共有し、美しいものを発見するためのプラットフォームとなっています。多くのユーザーは、画像を投稿する際の自動保存の問題に悩まされています。では、この問題をどうやって解決すればよいでしょうか? 1.小紅書で公開するときに写真が自動的に保存される問題を解決するにはどうすればよいですか? 1. キャッシュをクリアする まず、Xiaohongshu のキャッシュ データをクリアしてみます。手順は次のとおりです: (1) 小紅書を開いて右下隅の「マイ」ボタンをクリックします。 (2) 個人センター ページで「設定」を見つけてクリックします。 (3) 下にスクロールして「」を見つけます。 「キャッシュをクリア」オプションを選択し、「OK」をクリックします。キャッシュをクリアした後、Xiaohongshu を再起動し、写真を投稿して、自動保存の問題が解決されるかどうかを確認します。 2. 小紅書バージョンを更新して、小紅書が正しく動作することを確認します。
Linuxで中国語の文字化けを解決する方法
Feb 21, 2024 am 10:48 AM
Linux の中国語の文字化け問題は、中国語の文字セットとエンコーディングを使用する場合によく見られる問題です。文字化けは、ファイルのエンコード設定が正しくない、システム ロケールがインストールまたは設定されていない、端末の表示設定エラーなどが原因で発生する可能性があります。この記事では、いくつかの一般的な回避策を紹介し、具体的なコード例を示します。 1. ファイルのエンコード設定を確認します。ファイルのエンコードを表示するには file コマンドを使用します。ターミナルで file コマンドを使用して、ファイルのエンコードを表示します: file-ifilename。出力に「charset」がある場合
PyCharmが開けない問題を解決する方法を共有します
Feb 22, 2024 am 09:03 AM
タイトル: PyCharmが開けない問題の解決方法 PyCharmは強力なPython統合開発環境ですが、時々PyCharmが開けない問題に遭遇することがあります。この記事では、一般的な回避策をいくつか紹介し、具体的なコード例を示します。この問題に遭遇した方のお役に立てれば幸いです。方法 1: キャッシュをクリアする PyCharm のキャッシュ ファイルにより、プログラムが正常に開けなくなることがあります。この問題を解決するには、キャッシュをクリアしてみてください。道具
デフォルトゲートウェイが自動的に消える問題の解決方法
Feb 24, 2024 pm 04:18 PM
デフォルトゲートウェイが自動的に消えてしまう問題の解決方法 現代社会において、インターネットは人々の生活に欠かせないものとなっています。仕事でも娯楽でも、さまざまなタスクを完了するには安定したネットワーク接続が必要です。デフォルト ゲートウェイは、ローカル ネットワークを外部インターネットに接続する重要な要素の 1 つです。しかし、場合によってはデフォルトゲートウェイが自動的に消えてしまい、インターネットにアクセスできなくなるという問題が発生することがあります。では、デフォルトゲートウェイがなくなってしまった場合、どうやってこの問題を解決すればいいのでしょうか？まず、デフォルト ゲートウェイの概念を明確にする必要があります。デフォルトゲートウェイはネットワークルートです
