版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/q36835109/article/details/78647419
一直在忙，很久没有来写博客了！下面分享一个仿苹果手机通讯字母固定在屏幕顶部的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>仿苹果手机通讯录字母固定在屏幕顶部</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.container{
margin: 0 auto;
width:100%;
}
.container .nav{
width:100%;
height:60px;
background:#66bb6a;
border:3px solid #000000;
position: relative;
}
.container .nav.bg{
background:#00a0e9;
}
.container .nav.se{
height:100px;
}
.container .nav.se2{
height:200px;
}
.container .nav.nav-fixed{
position: fixed;
top:0;
}
.container .s-mg{
height:100px;
}
.container .mg{
height:500px;
}
</style>
<body>
<div class="container">
<div class="s-mg"></div>
<div class="nav">1</div>
<div class="mg"></div>
<div class="nav bg">2</div>
<div class="mg"></div>
<div class="nav se">3</div>
<div class="mg"></div>
<div class="nav bg">4</div>
<div class="mg"></div>
<div class="nav se2">5</div>
<div class="mg"></div>
<div class="nav bg">6</div>
<div class="mg"></div>
<div class="mg"></div>
</div>
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
;(function(){
var obj = {
scrollTopArr : [],
initScroll : $(window).scrollTop(),
prevIndex : -1,
nextIndex : 0,
init : function(){
return obj;
},
run : function(param){
var defaultParam = {
el : ".nav",
cl : "nav-fixed"
};
var tempParam = $.extend(defaultParam,param);
if(tempParam.el === ""){
alert('缺少参数');
return false;
}else if(tempParam.cl === ""){
alert('缺少参数');
return false;
}
obj.getAllElement(tempParam);
obj.initPosition(tempParam);
obj.winRoll(tempParam);
},
getAllElement : function(param){
$(param.el).each(function(){
var tempObj = {};
var targetHeight = $(this).height();
$(this).wrap('<div style="height:'+(targetHeight+'px')+'"></div>');
tempObj.height = targetHeight;
tempObj.distanceTop = $(this).offset().top;
obj.scrollTopArr.push(tempObj);
});
},
initPosition : function(param){
var h = '';
var mg = '';
var arrLen = obj.scrollTopArr.length;
$.each(obj.scrollTopArr,function(i,e){
if(i-1 >= 0){
h = obj.scrollTopArr[i-1].height;
}else{
h = obj.scrollTopArr[i].height;
}
mg = (obj.initScroll+h) - e.distanceTop;
if(obj.initScroll < e.distanceTop){
obj.nextIndex = i;
if(i === 0){
return false;
}else{
if(mg <= h){
$(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
}else{
$(param.el+":eq("+(i-1)+")").css('top','0');
}
$(param.el).removeClass(param.cl);
$(param.el+":eq("+(i-1)+")").addClass(param.cl);
}
return false;
}else{
obj.nextIndex = arrLen-1;
if(mg <= h){
$(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
}else{
$(param.el+":eq("+(i-1)+")").css('top','0');
}
if(i === (obj.scrollTopArr.length-1)){
$(param.el).removeClass(param.cl);
$(param.el+":eq("+i+")").addClass(param.cl);
}
}
});
},
winRoll : function(param){
$(window).scroll(function() {
var st = $(this).scrollTop();
var h = '';
var mg = '';
if (obj.initScroll < st) {
$.each(obj.scrollTopArr,function(i,e){
if(i-1 >= 0){
h = obj.scrollTopArr[i-1].height;
}else{
h = obj.scrollTopArr[i].height;
}
mg = (st+h) - e.distanceTop;
if(mg <= h){
$(param.el + ":eq(" + (i - 1) + ")").css('top', '-' + mg + 'px');
}else{
$(param.el+":eq("+(i-1)+")").css('top','0');
}
if(st - e.distanceTop >= 0) {
if(i > obj.prevIndex){
$(param.el).removeClass(param.cl);
$(param.el+":eq("+i+")").addClass(param.cl);
obj.prevIndex = i;
obj.nextIndex = i;
}
}
});
obj.initScroll = st;
}
if (obj.initScroll > st) {
obj.prevIndex = -1;
$.each(obj.scrollTopArr,function(i,e){
if(i-1 >= 0){
h = obj.scrollTopArr[i-1].height;
}else{
h = obj.scrollTopArr[i].height;
}
mg = (st+h) - e.distanceTop;
if(mg <= h){
$(param.el+":eq("+(i-1)+")").css('top','-'+mg+'px');
}else{
$(param.el+":eq("+(i-1)+")").css('top','0');
}
if(e.distanceTop - st >= 0) {
if(i === obj.nextIndex){
obj.nextIndex--;
if(obj.nextIndex > -1){
$(param.el).removeClass(param.cl);
$(param.el+":eq("+obj.nextIndex+")").addClass(param.cl);
}else if(obj.nextIndex === -1){
$(param.el).removeClass(param.cl);
}
}
}
});
obj.initScroll = st;
}
});
}
};
window.fixedNav = new obj.init();
})();
fixedNav.run({
el : ".nav",
cl : "nav-fixed"
});
</script>
</body>
</html>复制代码到HTML文件即可查看效果！