3 ways to solve the problem that the floating layer (floating header, footer) blocks the content on the mobile terminal_html5 tutorial skills

In today’s front-end pages, especially on mobile devices, it is often necessary to suspend the

or

modules and keep them positioned at the top or bottom of the page following the sliding of the page, as follows As shown in the figure.

The "Reply Topic" module follows the floating of the page and is always suspended at the bottom of the page. The code structure is as follows.

Copy code

The code is as follows:

...

Reply topic

...

To achieve such a function, of course, you need to use position:fixed. However, there is a bug in using position: fixed. Take the floating

at the bottom as an example (the same goes for floating

). When the page slides to the bottom, it is out of the normal document flow due to fixed positioning. , resulting in some content being obscured. As shown below:

The left side above is the problematic display, and the right side is the normal display. So, how to solve this problem? Here, I would like to put forward three of my opinions, hoping to find a better way.

Method 1. Javasrript solution

Use js to solve the problem. When the slider slides to the bottom of the page content, change the fixed positioning that will originally break away from the document flow to the relative positioning that does not break away from the document flow.

Using scripts to solve problems is the most arduous method. Try not to use scripts if they can be solved with css, but it is still a method.

Copy code

The code is as follows:

//Scroll bar on the Y axis Scroll distance
function getScrollTop(){
return document.body.scrollTop;
}
//The total height of the document
function getScrollHeight(){

Return document.body.clientHeight;
}
//Height of browser viewport
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
　{
　windowHeight = document.documentElement.clientHeight;
　}
else
{
🎜 > Return windowHeight;
}

//Sliding monitoring
window.onscroll = function(){
//When sliding to the bottom, the footer is set to the bottom, assuming that the height of

is 60
if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer' ).css('position','relative');
}

Method 2. Add padding-bottom to the body

Add a padding-bottom attribute to the html

tag, so that the content of the normal document flow will be a distance set by padding-bottom from the bottom of the body.

The disadvantage is that considering the reuse of modules and the frequent need to merge css files after the project is launched, when other pages do not need this floating block, it will burden pages that do not require

fixed positioning, which is not recommended. Use this method.

Copy codeThe code is as follows:

//Assume the height of

is 60px

body
{
padding-bottom: 60px;
}

Method 3. Add sibling placeholder

I personally think this method is the most practical. Wrap a layer of div outside the

block, and then add a

block at the same level as

. The height of this

block Set it to the same height as

and do not contain any content. This can have the effect of a placeholder, occupying the same height space as

at the bottom of the page. Of course, the page will slide to the bottom. Originally, The

hover block will perfectly overlap the placeholder block. It will not affect other pages. The code is as follows:

The only disadvantage is that it is not semantic and adds empty tags without substantial content.

Copy codeThe code is as follows:

Reply to topic

The above are the three methods I thought of. I have little talent and knowledge. If there are any mistakes or better methods in the article, please let me know. Thank you.