有的时候经常会遇到移动端吸顶效果，开始我也只是上网查了一下，分别有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. ServerSuperIO Designer IDE 发布，打造物联网通讯大脑，随心而联。附：C#驱动源代码。

    1.概况 注:ServerSuperIO Designer IDE 同行业网友随便使用,不涉及到软件使用限制的问题. 从2015年到现在的将近两年的时间,一直在开发.完善ServerSuperIO(S ...

  2. JavaScript：inherits

    网上一查,肯定搜索到继承的文章真心不少.我这里就只说一下自己常用的方式: 通常 在编写一个类的做法是,在构造函数里声明字段,在prototype里指定方法. //step1: 在子类的构造器里法里实例 ...

  3. 「mysql优化专题」主从复制面试宝典！面试官都没你懂得多！(11)

    内容较多,可先收藏,目录如下: 一.什么是主从复制 二.主从复制的作用(重点) 三.主从复制的原理(重中之重) 四.三步轻松构建主从 五.必问面试题干货分析(最最重要的点) 一.什么是主从复制(技术文 ...

  4. IO流（File类，IO流的分类，字节流和字符流，转换流，缓冲流，对象序列化）

    1.File类 File类可以在程序中 操作文件和目录.File类是通过建立File类对象,在调用File类的对象来进行相关操作的. 示例: public class Demo01 { public  ...

  5. jQuery架构（源码）分析

    ( function( global, factory ) { "use strict"; if ( typeof module === "object" &a ...

  6. web前端优化整理（转）

    如今浏览器能够实现的特性越来越多,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了. 开发人员普遍会将他们的代码习惯优先于用户体验.但是很多很小的改变可以让用户体验有 ...

  7. JDBC 程序实例小练习

    JDBC 程序实例问题 编程实现如下功能:在数据库中建立一个表,表名为student,其结构为学号.姓名.性别.年龄.英语.JavaSE程序设计.初级日语.总分,在表中输入多条记录. 学生的总分信息, ...

  8. mysql TIMESTAMP与DATATIME的区别---转载加自己的看法

    from:http://lhdeyx.blog.163.com/blog/static/318196972011230113645715/ from:http://blog.csdn.NET/zht6 ...

  9. ES6 数组的扩展

    1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b' ...

  10. lesson - 15 Linux系统日常管理4

    内容概要:1. rsync 命令格式rsync [OPTION]... SRC  DESTrsync [OPTION]... SRC  [USER@]HOST:DESTrsync [OPTION].. ...