需求：上拉导航条的时候，会加载出具体的数据信息；
上拉的位置高度由这些信息的条数决定
<!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>
