移动端吸顶(iOS与安卓)

有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有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>

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

时间: 2024-10-08 13:45:41

移动端吸顶(iOS与安卓)的相关文章

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

今天跟我华为的同学谈了一些技术/人生方面的感悟,感觉自己的人生目标及后面的工作/生活有了一个比较清晰的认识与规划. 首先我谈了一下我为什么要学习ios与安卓技术,我其实不想通过这二门技术来提升我的薪酬层次,而是想通过学习,来实现我心中对产品的功能一些想法.这点非常明确.其实现在我已经具备相关的开发人员资源,完成可以实现,但是我感觉他们对电子商务快消品行业经验不足,无法实现我心中的一些功能. 这几个月在广州学习,思考了很多事情,10年的职场生活,我一直任劳任怨的把公司的事情当自己的事情来做,在技术

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

2016年12月29日13:45:27 关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充 说道接口设计第一反应就是restful api 请明白一点,这个只是设计指导思想,也就是设计风格 ,比如你需要遵循这些原则 原则条件REST 指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful.Web 应用程序最重要的 REST 原则是,客户端和服务器之间的交互在请求之间是无状态的.从客户端到服务

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

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1.移动端 我们通常采用三段式进行布局的  例如 <div class="container">    <header></header><main></main><fotter&g

Vue开发——实现吸顶效果

因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还是挺简单的,因为在css中我们可以设置一个元素的position: fixed;,这样它就可以固定在那里,这样不管页面怎么滚动,它的位置都不受影响,所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了.但是这个合适的时机是什么时候呢,这就需要我们计算了,我们

代码:jquery 吸顶 效果

(只是个简单吸顶效果,还需完善) 吸顶: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll( function() { var m =$(document).scrollTop(); console.log(

ios:仿照安卓小米商城head左右滚动效果(多屏滚动)

1.之前做的应用需要这个效果但是当时用的比较复杂(绘图)的方法来实现,现在想到了一个新的方法. 2.用到了http://www.cnblogs.com/yoon/p/3616503.html 里面的小技巧 3.思路: 主要是在新的scrollview中重写Layoutsubviews 代码如下: - (void)layoutSubviews { [super layoutSubviews]; for (UIView *view in self.subviews) { if (view.tag =

status bar、navigationBar、tableView吸顶view设置

1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent; } -(void)v

原生js吸顶式导航条

<!--吸顶式导航条--><nav class="nav"> <div> <a href="javascript: return false"><img src="n.jpg" ></a> <div class="topNav"> <div> <input type="text" placeholder=&

吸顶式和天馈式无线覆盖的区别和应用

在企业无线网络应用中,常用的无线覆盖方式有,吸顶式无线AP和天馈式无线覆盖,简单分析一下两种覆盖方案的区别和优缺点.方式一:天馈式覆盖    天馈式覆盖是用一个工业级无线AP接多个吸顶天线,AP和天线用馈线连接,称为天馈式.工业级无线AP也称为"胖AP"或大功率无线AP,无线信号强,接入人数多. 方式二:吸顶式无线AP    整个覆盖区域安装多个吸顶式无线AP,称为吸顶式.吸顶式AP已经内置天线,每隔一段距离安装一个AP,AP用网线连接至机房.吸顶式无线AP也称为"瘦AP&q