Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend HTML-Tutorial 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧_html/css_WEB-ITnose

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 24, 2016 am 11:47 AM

　　引言  

　　在现在的前端页面中，尤其是移动端，经常会需要将

或者是
模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。

　　

　　“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。

1 ...2 <section class='footer'>3     <div class='reply-topic'>回复主题</div>4 </section>5 ...
Nach dem Login kopieren

　　实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮

在最下方为例（悬浮
同理），当页面滑到最下方的时候，由于是fixed定位，脱离了正常文档流，导致会遮挡住一部分内容。如下所示：

　　

　　上面左边是有问题的显示，右边为正常显示。那么，如何解决这个问题呢？在此，我抛砖引玉提出三种我的看法，希望能有更好的方法。

　　正题 　　

　　法一. Javasrript解决

　　使用js解决，判定当滑动条滑到页面内容的最底端的时候，将原本会脱离文档流的fixed定位改为不脱离文档流的relative定位即可。

　　使用脚本解决问题是最繁重的方法，能用css解决的尽量不使用脚本，但是也是一种方法。

 1     //滚动条在Y轴上的滚动距离 2     function getScrollTop(){ 3         　　return document.body.scrollTop; 4     } 5     //文档的总高度 6     function getScrollHeight(){ 7  8         　　return document.body.clientHeight; 9     }10     //浏览器视口的高度11     function getWindowHeight(){12         var windowHeight = 0;13 　　　　 if(document.compatMode == "CSS1Compat")14 　　　　{15 　　　　 　　windowHeight = document.documentElement.clientHeight;16 　　　　}17 　　　　else18 　　   {19 　　　　　　windowHeight = document.body.clientHeight;20 　　　　}21 　　　　return windowHeight;22     }23 24     //滑动监听25 　　window.onscroll = function(){26        //滑到底部时footer定于最下方,假定<footer>的height为6027        if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)    28            $('.footer').css('position','fixed');        29        else30            $('.footer').css('position','relative');31     }
Nach dem Login kopieren

　　法二.给body加上padding-bottom

　　给html标签加上一个padding-bottom属性，这样正常文档流的内容距离body底部就会产生一个padding-bottom设置的距离。

　　缺点是，考虑到现在项目上线之后模块的复用及经常需要合并css文件，当其他页面不需要这个悬浮块，就会给不需要

Related knowledge
Ist HTML für Anfänger leicht zu lernen? Ist HTML für Anfänger leicht zu lernen? Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Was ist ein Beispiel für ein Start -Tag in HTML? Was ist ein Beispiel für ein Start -Tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren? Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren? Apr 04, 2025 pm 11:30 PM

Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...

Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben? Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben? Apr 04, 2025 pm 11:54 PM

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen? Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen? Apr 05, 2025 am 06:15 AM

Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...

HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler Apr 09, 2025 am 12:12 AM

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.

See all articles