简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

フローティングレイヤー（フローティングヘッダー、フッター）がモバイル端末のコンテンツをブロックする問題を解決する3つの方法_html5チュートリアルスキル

WBOY
リリース： 2016-05-16 15:46:53
オリジナル
5194 人が閲覧しました

今日のフロントエンド ページ、特にモバイル デバイスでは、ページのスライド後に

または
モジュールを一時停止して、ページの上部または下部に配置しておく必要があることがよくあります。 , 図に示すように。

「返信トピック」モジュールはページのフローティングに従い、常にページの下部で停止します。コード構造は次のとおりです。


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

...

トピックに返信


...

このような機能を実現するには、当然、position:fixed を使用する必要があります。ただし、position: fix の使用にはバグがあります。例として、下部のフローティング

を取り上げます (ページが下部にスライドすると、ページが外れてしまいます)。位置が固定されているため、通常のドキュメント フローが発生し、一部のコンテンツが見えにくくなります。以下に示すように:

上の左側が問題のある表示、右側が正常な表示です。では、この問題をどうやって解決すればよいでしょうか?ここで、より良い方法を模索したいと考えて、私の意見を3つ述べさせていただきます。

方法 1. Javasrript ソリューション

js を使用して問題を解決します。スライダーがページ コンテンツの下部にスライドしたときに、本来ドキュメント フローから外れる固定位置を、ドキュメント フローから外れない相対位置に変更します。

スクリプトを使用して問題を解決するのは最も困難な方法です。CSS で解決できる場合はスクリプトを使用しないようにしてください。ただし、それでも方法です。

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

// のスクロール バーY 軸のスクロール距離
function getScrollTop(){
return document.body.scrollTop;
}
//ドキュメントの合計の高さ
function getScrollHeight(){

Return document.body.clientHeight;
}
//ブラウザのビューポートの高さ
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
{
windowHeight = document.documentElement.clientHeight;
}
else
{
🎜 > Return windowHeight;
}

//スライド監視
window.onscroll = function(){
//下にスライドすると、

の高さが 60< であると仮定して、フッターが下に設定されます。 🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed')
else
$('.footer' ).css('position','relative');
}



方法 2. ボディにpadding-bottom を追加します

html タグに padding-bottom 属性を追加し、通常のドキュメント フローのコンテンツが本文の下部から padding-bottom で設定された距離になるようにします。

欠点は、モジュールの再利用と、プロジェクトの起動後に頻繁に CSS ファイルをマージする必要があることを考慮すると、他のページがこのフローティング ブロックを必要としない場合、
固定位置を必要としないページに負担がかかることです。 、この方法の使用はお勧めしません。



コードをコピーします
コードは次のとおりです:
//高さを想定します<フッター> は 60 ピクセルです
ボディ
{
パディングボトム:
}



方法 3. 兄弟プレースホルダーを追加

個人的には、この方法が最も実用的だと思います。

ブロックの外側に div のレイヤーをラップし、この
の高さに
ブロックを追加します。 ;div> ブロック
と同じ高さに設定し、コンテンツを含まないようにします。これは、ページの下部にある
と同じ高さのスペースを占有します。をクリックすると、ページが下にスライドします。本来、
はプレースホルダー ブロックに完全に重なっています。他のページには影響しません。コードは次のとおりです:

唯一の欠点は、セマンティックではなく、実質的なコンテンツのない空のタグを追加することです。



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





トピックに返信< ;


上記は私が考えた3つの方法です。記事に間違いやより良い方法があれば、教えてください。

関連ラベル：
携帯端末
ソース：php.cn
前の記事：クールなオーディオ プレーヤーの作成に関する HTML5 グラフィック チュートリアル plug-in_html5 チュートリアルのスキル 次の記事：HTML5 オーディオ タグは再生制御に js を使用します。 example_html5 チュートリアル スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
モバイル サイズの画面で段落を左側に移動するための CSS および HTML メソッド 通常の 16:9 のコンピュータ画面では、左側にテキスト、右側に画像が表示され、完璧に見えます。ただし、小さい画面 (携帯電話サイズの画面など) では、希望どおりに段落の上に画像が...
から 2024-04-04 20:25:22
0
1
330
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
Laravel プロジェクトの「パブリック ディレクトリの削除」を中国語に翻訳すると、「パブリック ディレクトリの削除」になります。 Laravel プロジェクトを作成していますが、URL から /public/ 名を削除できないという大きな問題があります。いくつかのファイルをパブリックディレクトリからlarav...
から 2024-04-03 19:26:05
0
1
355
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！