有的时候经常会遇到移动端吸顶效果，开始我也只是上网查了一下，分别有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. 基于MATLAB的人脸识别算法的研究

    基于MATLAB的人脸识别算法的研究 作者:lee神 现如今机器视觉越来越盛行,从智能交通系统的车辆识别,车牌识别到交通标牌的识别:从智能手机的人脸识别的性别识别:如今无人驾驶汽车更是应用了大量的机器 ...

  2. ASP.NET Core 使用 Hangfire 定时任务

    定时任务组件,除了 Hangfire 外,还有一个 Quarz.NET,不过 Hangfire .NET Core 支持的会更好些. ASP.NET Core 使用 Hangfire 很简单,首先,N ...

  3. hbase分布式集群搭建

    hbase和hadoop一样也分为单机版.伪分布式版和完全分布式集群版本,这篇文件介绍如何搭建完全分布式集群环境搭建. hbase依赖于hadoop环境,搭建habase之前首先需要搭建好hadoop ...

  4. 前端开发JavaScript清除浏览器缓存的方法

    查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但 ...

  5. 以深圳.NET俱乐部名义 的技术交流会圆满成功

    2017年5月13日的深圳下着暴雨,一场以深圳.NET俱乐部名义的.NET技术交流会在微软Build 2017刚闭幕时在罗湖布吉路与翠山路交界处富基PARK国际6F举办,这次交流以微软Build 20 ...

  6. 【Zookeeper】源码分析之Leader选举（一）

    一.前言 分析完了Zookeeper中的网络机制后,接着来分析Zookeeper中一个更为核心的模块,Leader选举. 二.总结框架图 对于Leader选举,其总体框架图如下图所示 说明: 选举的父 ...

  7. ArcGIS 网络分析[1.4] 制作点线要素时需要注意的地方

    有很多同学虽然成功做好了网络数据集,但是分析时会出现这样的问题: 这是为什么呢? 这有三个可能的原因: 1. 两个点之间所有的道路没有连通(问题出在点.线数据上). 2. 网络数据集出现了孤立的点位置 ...

  8. HNOI 2012 矿场搭建

    #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #def ...

  9. bzoj 3718: [PA2014]Parking

    Description 你的老板命令你将停车场里的车移动成他想要的样子. 停车场是一个长条矩形,宽度为w.我们以其左下角顶点为原点,坐标轴平行于矩形的边,建立直角坐标系.停车场很长,我们可以认为它一直 ...

  10. chattr 命令详解

    chattr   作用: 改变文件属性,这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有一下8种模式 模式: a: 让文件或目录仅供附加用途 b: 不更新文件或目录的最后存取时间 ...