有的时候经常会遇到移动端吸顶效果，开始我也只是上网查了一下，分别有iOS和android两种样式，如下：

/*!*Android*!*/

.head {

position: fixed;

top: 0;

left: 0;

z-index: 5;

}

/*!*iOS*!*/

.head{

position: -webkit-sticky;

position: sticky;

top: 0;

left: 0;

z-index: 5;

}

设置之后你会发现只有ios手机的吸顶效果OK了，android手机完全不好使，这是因为样式覆盖了，ios的样式在下边，权重相同，自然把android的样式覆盖了。那么如何解决呢？

我是先获取手机的系统类型，再根据不同类型来添加不同类名，达到效果一致的目的！具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<title>Title</title>

<style>

　　.head{

　　 width:7.5rem;

　　 height:1rem;

　　    line-height: 1rem;

　　 text-align: center;

　　 /*position: fixed;*/

　　 background: #fff;

　　 z-index: 1001;

　　}

　　/*!*Android*!*/

　　.headAndr {

　　position: fixed;

　　top: 0;

　　 left: 0;

　　 z-index: 5;

　　}

　　/*!*iOS*!*/

　　.headIos{

　　position: -webkit-sticky;

　　position: sticky;

　　 top: 0;

　　 left: 0;

　　z-index: 5;

　　 }

　　.headhead{

　　 width:7.5rem;

　　height:1rem;

　　 position: relative;

　　}

　</style>

</head>

<body>

<div class="head">  //这是头部

<i class="coordinate"></i>

<span>北京</span>

<i class="logo"></i>

<i class="_user"></i>

<em class="wode"></em>

</div>

<div class="headhead"></div> //安卓机吸顶是需要有一部分内容填充到原来位置来实现的（headhead是与head一致大小的一个元素）

　　 <div class="con">中间内容区</div>

//js部分！！！！！！！！！！1

<script src="js/Zepto.min.js"></script> //要引入移动端的类库

<script>

document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px"; //自己设定的移动端的1rem = 50px;

var u = navigator.userAgent; //获取显示器的信息

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isiOS == true){  //苹果机，headhead隐藏，加类名headiOS

console.log(1);

$(".headhead").hide();

$(".head").addClass("headIos");

}else{ //安卓机，加类名headAndr

console.log(0);

$(".head").addClass("headAndr");

}

</body>

</html>

这样就解决啦，切记此代码复制粘贴的时候注释要用正确的格式、

移动端吸顶（iOS与安卓）的更多相关文章

  1. 类似吸顶功能解决ios不能实时监听onscroll的触发问题

    问题:近期项目需要一个类似西东功能,当页面向上滚动160px后div固定在顶部 解决方法:首先,想到的是window.onscroll方法 .fixed{position:fixed;-webkit- ...

  2. 年过三十,我为什么要学习ios 与安卓App 移动端技术

    今天跟我华为的同学谈了一些技术/人生方面的感悟,感觉自己的人生目标及后面的工作/生活有了一个比较清晰的认识与规划. 首先我谈了一下我为什么要学习ios与安卓技术,我其实不想通过这二门技术来提升我的薪酬 ...

  3. 移动端开发ios和安卓兼容问题

    移动端开发ios和安卓兼容问题 最近做移动端混合开的时候遇到一些安卓和iOS的兼容性问题,兼容想问题不仅在浏览器存在也在APP开发当中也会经常遇到这样的情况. 最近看了一下内容很不错的移动端开发相关的 ...

  4. 最简单的基于FFmpeg的移动端例子：IOS 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端例子系列文章列表: 最简单的基于FFmpeg的移动端例子:A ...

  5. 最简单的基于FFmpeg的移动端例子：IOS 推流器

    转至:http://blog.csdn.net/leixiaohua1020/article/details/47072519   ================================== ...

  6. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  7. Nginx集群之.Net打造WebApp(支持IOS和安卓)

    目录 1       大概思路... 1 2       Nginx集群之.Net打造WebApp(支持IOS和安卓) 1 3       安卓模拟器... 1 4       MUI框架... 3 ...

  8. php后台对接ios，安卓，API接口设计和实践完全攻略，涨薪必备技能

    2016年12月29日13:45:27    关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充   说道接口设计第一反应就是r ...

  9. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

随机推荐

  1. ML01 机器学习后利用混淆矩阵Confusion matrix 进行结果分析

      目标: 快速理解什么是混淆矩阵, 混淆矩阵是用来干嘛的. 首先理解什么是confusion matrix 看定义,在机器学习领域,混淆矩阵(confusion matrix),又称为可能性表格或是 ...

  2. Web前端开发好学吗？谈谈一位学姐的前端工程师之路

    我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...

  3. log4go的输出优化

    又看了一些golang的日志包和相关的文章,仔细阅读了go 1.9.2系统提供的log和go-log,产生了对log4go的日志输出进行优化的想法. 结构化与multiwriter log使用mult ...

  4. Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量

    前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕 之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...

  5. springboot 入门五-日志一

    springboot内部采用commons logging作为日志纪录,但也保留了第三方的日志框架接入的实现,例如Java Util Logging,Log4J2还有Logback.如果你要实现一种日 ...

  6. ES6对象及ES6对象简单拓展

    ES6对象和传统的JS比较起来支持简写,比如说属性简写方法简写,还支持name属性,可以通过他迅速得到函数属性名表达式(如果是用bind方法创造的函数name属性会返回bound加上原函数的名字,Fu ...

  7. 云储存第三方--阿里云OSS VS 又拍云USS

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...

  8. SAP RFC介绍：关于sRFC，aRFC，tRFC，qRFC和bgRFC

    大概八月份的时候做过一个有关两个SAP系统的财务集成的项目,使用到了RFC(Remote Function Call)技术.因为之前有着医疗-CRM相关接口开发的经验,以为自己对RFC很熟悉了,做起来 ...

  9. k-近邻算法实例

    1. 简单例子 步骤 1.1 计算已知点和被求点的距离 1.2 按距离递增排序 1.3 求出距离最近的前k个点的类别最大值作为目标分类 from numpy import * import opera ...

  10. Windows as a Service（3）——使用SCCM管理Windows10更新

    Hello 小伙伴们,这是这个系列的第三篇文章,我已经和大家分享了有关于Windows 10服务分支以及利用WSUS管理更新的方式,有兴趣的小伙伴们可以参考下面的链接: Windows as a Se ...