Issue: The bottom navigation bar of the mobile front end is designed to be compatible with various browsers under Android and iOS comes with Safari, but is not compatible with the nails under Apple.
Specific code format:
<body><!--Head navigation bar--><div class= header > Content </div><!--contents--><div class= "Content" > Content </div><!--Bottom navigation bar--><div class= "Footer" > Content </div></body>
CSS style:
body{padding-bottom:20px;height:100%;}. Header{position:relative;width:100%;height:45px;background: #38adff;}. content{ width:100%;height:100%;}. footer{ position:fixed;width:100%;left:0px; z-index:105; bottom:0px;}Writing it down is normal on Android's list of browsers and staples. It's normal on a series of iOS browsers, but on the spike, dragging will cause the bottom navigation bar to drag along. This problem has troubled me for several days, obviously just a little bug!
On the internet to find a lot of information, such as dynamic changes in the bottom navigation bar top value:
<script type= "Text/javascript" > $ (window). Scroll (function () { ///focus is the implementation of the following statement ( "#fixnav"). CSS ({top:window.innerHeight + window.scrolly-$ ("#fixnav"). Outerheight ()}); </script>This writing, does have the effect, but under iOS will appear the bottom navigation bar flashes the effect, so write user experience is not good, so ruled out.
Later, the body can not be dragged, only drag the Content section, the bottom navigation bar can not be dragged, changed the content of the style
. content{ Position:absolute; Absolute positioning top:0px; width:100%; Overflow:auto; height:100%; OVERFLOW-Y: scroll; longitudinal sliding -webkit-overflow-scrolling:touch; Achieve fast scrolling and rebound effect padding-bottom:60px;}This can be done on iOS, but as long as Apple's own pull-up tool box appears, it causes the bottom navigation bar to drag again. So the problem is not solved in a real sense.
PS: Nailing your own kernel environment is chorme, but it is normal for me to run on an Apple chorme. Do not understand the nail.
Baidu a bit iscroll.js can solve the fixed problem on iOS, not yet tried, ready to try.
Mobile bottom navigation bar fixed-compatible with iOS
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
