仿百度地图上拉下滑抽屉盒
原型图
需求：上拉导航条的时候，会加载出具体的数据信息；
上拉的位置高度由这些信息的条数决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
overflow:hidden
}
a {
text-decoration: none;
}
body {
position: relative;
}
.div2 {
position: absolute;
width: 100%;
background: #fff;
}
.downNav {
}
.downNav ul {}
.downNav ul li {
list-style: none;
height: 3rem;
border: 1px solid #CCCCCC;
line-height: 3rem;
border-top: none;
}
.downNav ul li span {
display: inline-block;
text-align: center;
}
.downNav ul li span:first-child {
width: 12%;
}
.downNav ul li span:nth-child(2) {
width: 25%;
}
.downNav ul li span:nth-child(3) {
width: 48%;
}
.downNav ul li span:nth-child(4) {
width: 2%;
}
.down {
position: relative;
border: 1px solid #F0F1F1;
border-right: none;
width: 100%;
}
.site {
margin: 0 0 0 1rem;
font-size: 24px;
line-height: 71px;
}
.details {
margin: 0 0 0 1rem;
margin-bottom: 23px;
}
.details span {
margin: 0 10px 0 0;
}
.walk {
width: 80px;
height: 80px;
border-radius: 50px;
background: #3487ef;
text-align: center;
line-height: 14px;
position: absolute;
right: 18px;
bottom: 78px;
}
.walk img {
margin-top: 11px;
}
.walk p {
color: #FFFFFF;
}</style>
</head>
<body>
<div id="div2" class="div2">
<div class="wrap">
<div class="down">
<div class="site">光大会展中心F座2201</div>
<div class="details"><span>198m</span>|<span style="margin-left:10px;">漕宝路86号光大会展中心f座2201</span></div>
<div class="walk">
<img src="img/walk.png" alt="行走" />
<p>到这去</p>
</div>
</div>
<div class="downNav">
<ul>
<li>
<span>姓名</span>
<span>联系电话</span>
<span>邮箱</span>
</li>
<li>
<span>王婷</span>
<span>152104</span>
<span>1357097</span>
<span><a href="form.html" >></a></span>
</li>
<li>
<span>王婷</span>
<span>152104</span>
<span>1357097</span>
<span><a href="form.html" >></a></span>
</li>
<li>
<span>王婷</span>
<span>152104</span>
<span>1357097</span>
<span><a href="form.html" >></a></span>
</li>
<li>
<span>王婷</span>
<span>152104</span>
<span>1357097</span>
<span><a href="form.html" >></a></span>
</li>
</ul>
<div class="dw"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js";></script>
<script>
$(function() {
var isdrag = false;
var NowTop = 0,
flag = true,
h = $(".wrap").height(),
h1 = 0,
h2 = $(".div2").position().top,
moveY = 0,
toTop = 0,
disEndY=0,
disY;
var oDiv2 = document.getElementById("div2");
oDiv2.addEventListener('touchstart', thismousedown);
oDiv2.addEventListener('touchend', thismouseup);
oDiv2.addEventListener('touchmove', thismousemove);
$(oDiv2).css("top",($("body").height()-120))
function thismousedown(e) {
// debugger
isdrag = true;
disY = e.touches[0].pageY;
if((disY-disEndY)>0){
if(h>$("body").height()){
moveY = $("body").height();
h-=$("body").height();
}else if(h<$("body").height()&&h>0){
moveY = h;
h = $(".wrap").height();
}
}
return false;
}
function thismousemove(e) {
var h=$(".wrap").height()
if(isdrag) {
var x = e.touches[0].pageY - disY;
//向下滑动
if((e.touches[0].pageY - disY) > 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
if(Math.abs($(".div2").position().top-h2)>$("body").height()){
h1=$("body").height();
$(oDiv2).stop().animate({
top: "+="+h1+"px"
}, 1000)
}else{
$(oDiv2).stop().animate({
top: ($("body").height()-120)+"px"
}, 1000)
}
flag=true
return false;
}
// 向上滑动
if((e.touches[0].pageY - disY) < 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
if(flag){
$(oDiv2).stop().animate({
top: "-="+moveY+"px"
}, 1000)
if(moveY<$("body").height()){
flag=false
h = $(".wrap").height();
}
}
return false;
}
}
}
function thismouseup(e) {
isdrag = false;
};
});</script>
</html>
原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe190后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
