移动端底部导航栏固定——兼容IOS

最新推荐文章于 2023-03-03 17:03:25 发布

weixin_30247781

最新推荐文章于 2023-03-03 17:03:25 发布

阅读量840

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/formybestlife/p/6347639.html

版权

问题：移动端前端底部导航栏设计兼容安卓下的各种浏览器和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不适配问题，目前还没尝试，准备试一下。

作者：Aylson.Fu
出处：https://www.cnblogs.com/formybestlife/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。非常感谢~

转载于:https://www.cnblogs.com/formybestlife/p/6347639.html

weixin_30247781

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端底部导航栏固定——兼容IOS

问题：移动端前端底部导航栏设计兼容安卓下的各种浏览器和IOS自带的Safari,但是不兼容苹果下的钉钉。具体代码格式：<body> <div class="header">内容</div> <div class="content">内...
复制链接

扫一扫