Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to solve the problem of mobile suspension layer blocking content". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In the current front-end pages, especially on the mobile side, it is often necessary to float the or module out and follow the sliding of the page to keep it at the top or bottom of the page, as shown in the following figure.

The "reply theme" module, which follows the floating of the page, has been suspended at the bottom of the page, and the code structure is as follows.

The code is as follows:

...

Reply to the topic

...

Such a function is, of course, achieved by using position:fixed. However, when using position:fixed, there is a bug, which is suspended at the bottom (similarly suspended). When the page slides to the bottom, it is positioned by fixed and deviates from the normal document stream, which will obscure part of the content. As follows:

Above, there is a problematic display on the left and a normal display on the right. So, how to solve this problem? Here, I would like to put forward three kinds of my views, hoping to find a better way.

Law one. Javasrript solution

Using the js solution, it is determined that when the slider slides to the bottom of the page content, change the fixed location that would have left the document flow to the relative location that does not leave the document flow.

Using scripts to solve problems is the most onerous way to solve problems. If you can solve problems with css, try not to use scripts, but it is also a way.

The code is as follows:

/ / the scrolling distance of the scroll bar on the Y axis

Function getScrollTop () {

Return document.body.scrollTop

}

/ / 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

{

WindowHeight = document.body.clientHeight

}

Return windowHeight

}

/ / sliding monitoring

_ window.onscroll = function () {

/ / when you slide to the bottom, the footer is set at the bottom, and the assumed height is 60

If ((getScrollHeight ()-getScrollTop ()-getWindowHeight ()) > 61)

$('.footer') .css ('position','fixed')

Else

$('.footer') .css ('position','relative')

}

Law two. Add padding-bottom to body

Add a padding-bottom attribute to the html tag so that the content of the normal document stream is a padding-bottom-set distance from the bottom of the body.

The disadvantage is that, considering the reuse of modules after the launch of the project and the frequent need to merge css files, when other pages do not need this floating block, it will cause a burden to pages that do not need fixed positioning, so this method is not recommended.

The code is as follows:

/ / the assumed height is 60px

Body

{

Padding-bottom: 60px

}

Law three. Increase sibling placeholder

Personally think this method is the most practical, and then wrap a layer of div outside the block, and then add a block of the same level, the height of this block is set to the same height and does not contain any content, so it can play a placeholder effect, occupy the same height of space at the bottom of the page, of course, the page slides to the bottom, the original suspension block will overlap perfectly with this placeholder block. And will not affect other pages. The code is as follows:

The only disadvantage is that it does not conform to semantics and adds empty tags with no substance.

The code is as follows:

Reply to the topic

This is the end of the content of "how to solve the problem of mobile suspension layer blocking content". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.