Home > Developer > JavaScript
Tip: handle suspended
Introduction
In the current front-end pages, especially mobile terminals, the
In the reply topic module, the floating following the page remains at the bottom of the page. The code structure is as follows.
1... 2 <section class = 'footer '> 3 <div class = 'reply-topic'> reply topic </div> 4 </section> 5...
Of course, position: fixed is used to implement such a function. However, when position: fixed is used, a bug is found, Taking Floating <footer> at the bottom as an example (floating
There is a problem with the display on the left, and the display on the right is normal. So how can we solve this problem? Here, I hope there will be a better way to put forward three ideas.
Question
Method 1. Solve the problem by using rript
Solve the problem by using js. When sliding the slide to the bottom of the page content, you can change the fixed location that will originally leave the document stream to the relative location that will not leave the Document Stream.
Using scripts to solve the problem is the most arduous method. Using css to solve the problem, try not to use scripts, but it is also a method.
1 // scroll distance of the scroll bar on the Y axis 2 function getScrollTop () {3 return document. body. scrollTop; 4} 5 // the total height of the document 6 function getScrollHeight () {7 8 return document. body. clientHeight; 9} 10 // The height of the browser's viewport 11 function getmediawheight () {12 var then wheight = 0; 13 if (document. compatMode = "CSS1Compat") 14 {15 minutes wheight = document.doc umentElement. clientHeight; 16} 17 else18 {19 bytes wheight = document. body. clientHeight; 20} 21 return invalid wheight; 22} 23 24 // sliding listen 25 window. onscroll = function () {26 // when sliding to the bottom, footer is set to the bottom. Assume that the <footer> height is 6027 if (getScrollHeight ()-getScrollTop () -getaskwheight ()> 61) 28 items ('.footer'hangzhou.css ('position', 'fixed'); 29 else30 items ('.footer'hangzhou.css ('position', 'relative '); 31}
Method 2: Add padding-bottom to the body
Add a padding-bottom attribute to the html <body> label, so that the content of the normal Document Stream is located at the bottom of the body, and a distance is set by padding-bottom.
The disadvantage is that, considering the reuse of modules after the project is launched and the frequent merging of css files, when this floating block is not required for other pages, this method is not recommended for pages that do not require <footer> fixed positioning.
1 // assume that the height of <footer> is 60px2 body 3 {4 padding-bottom: 60px; 5}
Method 3. Add a placeholder for the same level <div>
I personally think this method is the most practical. Wrap a div outside the <footer> block and add a <div> block at the same level as the <footer> block, the height of the <div> block is set to the same height as that of <footer> and does not contain any content. This gives a placeholder effect, the bottom of the page occupies the same space as <footer>. Of course, when the page slides to the bottom, the original <footer> suspended block perfectly overlaps with the placeholder block. It does not affect other pages. The Code is as follows:
The only drawback is that it does not conform to semantics and adds null tags without substantive content.
1 <! -- Wrap a div layer outside footer --> 2 <div> 3 <! -- The div block that acts as a placeholder has no substantive content --> 4 <div style = "height: 60px;"> </div> 5 6 <! -- Fixed floating footer --> 7 <section class = 'footer '> 8 <div class = 'reply-topic'> reply topic </div> 9 </section> 10 </div>
The above are the three methods I have come up with. I would like to tell you if there are any mistakes or better methods in this article. Thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
