移动端HTML5导航栏吸顶：IOS（sticky）和Android两种实现方式
一、前言
吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。（图片来自其他博客，感谢博主）
二、在移动端开发遇到的问题
吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性。但是问题是：安卓支持scroll事件和fixed属性，但是ios8.0的scroll事件不是连续触发的，只会在scroll事件结束后触发一次scroll事件，同时ios还不支持设置fixed属性。
Ios支持position: sticky 可以很好的解决这个问题，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
三、解决思路
1.检测客户端是安卓系统还是ios系统。
2.如果是安卓系统添加scroll事件监听
3.如果是ios系统添加position: sticky
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
-
<title>pc sticky
title>
-
<style>
-
* {
-
margin:
0;
-
padding:
0;
-
}
-
-
.banner {
-
height:
200px;
-
}
-
.nav {
-
height:
40px;
-
background-color: skyblue;
-
border:
1px solid silver;
-
}
-
.sticky {
-
/*滚过初始位置时自动吸顶*/
-
position: -webkit-sticky;
-
position: sticky;
-
/*吸顶时的定位*/
-
top:
0;
-
left:
0;
-
/*z比下方所有z高*/
-
z-index:
9999;
-
}
-
.content {
-
height:
1500px;
-
}
-
-
.fixed-top {
-
position: fixed;
-
width:
100%;
-
left:
0;
-
top:
0;
-
}
-
style>
-
head>
-
<body>
-
<div class="banner">Banner图
div>
-
<div class="nav">吸顶元素
div>
-
<div class="content">很长的内容
div>
-
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js">
script>
-
<script>
-
var stickyEl =
document.querySelector(
'.nav');
-
function fixed(num) {
-
var u = navigator.userAgent;
-
var isAndroid = u.indexOf(
'Android') >
-1 || u.indexOf(
'Adr') >
-1;
-
var isiOS = !!u.match(
/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-
if(isAndroid) {
-
document.body.onscroll =
function(e) {
-
var scrollT =
document.body.scrollTop;
-
if (scrollT > num) {
-
$(stickyEl).addClass(
'fixed-top');
-
}
else {
-
$(stickyEl).removeClass(
'fixed-top');
-
}
-
};
-
}
else
if(isiOS) {
-
$(stickyEl).addClass(
'sticky');
-
console.log(
11);
-
}
-
}
-
fixed(
200);
-
script>
-
body>