有的时候经常会遇到移动端吸顶效果，开始我也只是上网查了一下，分别有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. Python笔记·第五章—— 列表（List） 的增删改查及其他方法

    一.列表的简介   列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[ ]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如:li = ...

  2. Linux常用操作命令及快捷键

    Linux操作命令: 大体分为两类: 1.内部命令       help 命令(查看内部命令)  2.外部命令    命令 --help(查看外部命令) type 命令:用来查看该命令是内部命令还是外 ...

  3. scrapy里的selector，不能有正则提取

    参考:http://blog.csdn.net/dawnranger/article/details/50037703 Selector 有一个 .re() 方法,用来通过正则表达式来提取数据. 不同 ...

  4. eclipse点击空白处自动打开项目

    如图 选择上面的 Link with Editor 即可

  5. eoLinker 新功能发布，增加了识别代码注释自动生成文档功能

    产品地址:https://www.eolinker.com开源代码:https://www.eolinker.com/#/os/download在线生成代码注释工具:http://tool.eolin ...

  6. xml文件生成方式一（字符串拼接，将多实体类对象写入xml文件）

    1.xml文件生成,拼接字符串使用StringBuffer或StringBuilder 2.拼接好后写入文件即可,将多个实体类写入xml文件 3.这种方式比较简单,但是操作也比较麻烦 4.下面是我的代 ...

  7. Add to List 349. Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  8. Python安装和开发环境搭建

    1.官网:http://www.python.org/download/下载安装包,目前最新版本为3.6,安装包很多地方可以下,也可以在360软件管家上下载安装  特别要注意勾选:Add Python ...

  9. Java订单号生成，唯一订单号（日均千万级别不重复）

    Java订单号生成,唯一订单号 相信大家都可以搜索到很多的订单的生成方式,不懂的直接百度.. 1.订单号需要具备以下几个特点. 1.1 全站唯一性. 1.2 最好可读性. 1.3 随机性,不能重复,同 ...

  10. js选中文字兼容性解决

    function selectText(){ if(document.selection){ //ie return document.selection.createRange().text; } ...