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

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

または

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

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

コードをコピーします

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

...

トピックに返信

...

このような機能を実現するには、当然、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つの方法です。記事に間違いやより良い方法があれば、教えてください。