移动端底部导航栏固定——兼容IOS
Posted Alyson.fu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端底部导航栏固定——兼容IOS相关的知识，希望对你有一定的参考价值。
问题：移动端前端底部导航栏设计 兼容安卓下的各种浏览器和ios自带的Safari,但是不兼容苹果下的 钉钉。
具体代码格式：
<body> <!-- 头部导航栏 --> <div class="header">内容</div> <!-- 内容 --> <div class="content">内容</div> <!-- 底部导航栏 --> <div class="footer">内容</div> </body>
css样式:
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;
}
这样写下来，在安卓的一系列浏览器和钉钉上面是正常的 。在IOS的一系列浏览器上是正常的，但是在钉钉上面，拖动的时候会导致底部导航栏也跟着拖动。这个问题困扰了我好几天，明明只是个小BUG！
在网上找了很多资料，比如动态的改变底部导航栏的top值：
<script type="text/javascript"> $(window).scroll(function(){ // 重点就是下面这一条语句的实现 $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() }); }); </script>
这样写，确实有效果，但是在IOS下面会出现底部导航栏闪现闪出的效果，这样写用户体验性也会不好，所以排除了。
后来换种思路，body不可拖动，只拖动内容部分，底部导航栏不可拖动，改了一下content的样式
.content{
position: absolute; //绝定位
top:0px;
width:100%;
overflow:auto;
height: 100%;
overflow-y: scroll; //纵向滑动
-webkit-overflow-scrolling: touch; //实现快速滚动和回弹的效果
padding-bottom:60px;
}
这样写在IOS下的钉钉初步可以了，但是只要苹果自带的上拉工具框出现就会导致底部导航栏再次跟着拖动。所以这个问题并未真正意义上的解决。
PS：钉钉自己的内核环境是chorme，但是我在苹果上的chorme上运行是正常的。搞不懂钉钉。
百度了一下IScroll.js可以解决IOS上面的fixed不适配问题，目前还没尝试，准备试一下。
以上是关于移动端底部导航栏固定——兼容IOS的主要内容，如果未能解决你的问题，请参考以下文章