求大侠看看内容滑动到底部，头部和尾部会隐藏掉

洛阳城 · 发表于 2014-8-8 11:57:22

附上源码，不胜感激：<!DOCTYPE html>

<html>
<head>
<script>
      (function () {
         if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            msViewportStyle.appendChild(
                  document.createTextNode("@-ms-viewport{width:auto!important}")
            );
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
         }
      })();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>huanying</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="ui/plugins/css/af.scroller.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" title="default" />

<script type="text/javascript" charset="utf-8" src="js/appframework.js"></script>
<script type="text/javascript" charset="utf-8" src="ui/appframework.ui.js"></script>
<script src="ui/plugins/af.scroller.js"></script>
<script src="ui/plugins/af.scrollScreen.js"></script>
<script src="ui/plugins/af.actionsheet.js"></script>
<script src="js/af.plugins.min.js"></script>
<script type="text/javascript">
      $(function () {
         //$.ui.toggleHeaderMenu(showHide);
         //$.ui.toggleNavMenu(showHide);
      })
      function showHide(obj, objToHide) {
         var el = $("#" + objToHide)[0];

         if (obj.className == "expanded") {
            obj.className = "collapsed";
         } else {
            obj.className = "expanded";
         }
         $(el).toggle();
      }
</script>
<style type="text/css">
      .travel_List a { color: #333; text-decoration: none; }
      .travel_List li { margin: 10px; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }
         .travel_List li h2, .travel_List li p { margin: 0; padding: 0; }
         .travel_List li img { float: left; width: 90px; height: 90px; margin-right: 10px; border-radius: 6px; }
         .travel_List li h2 { margin-bottom: 5px; font-weight: normal; color: #ff6400; }
      .travel_List .intro_Item { --height: 42px; line-height: 20px; }
      .travel_List .price_Item em { float: right; font-style: normal; color: #ff6400; }
      #afui .price_Item { margin: 0; padding: 0; }
      #main .list > li > a { padding: 10px; }

      /* 详细页css */
      .section img { width: 100%; }
      .header_ h2 { background: none repeat scroll 100% 100% #fff; font-size: 18px; font-weight: bold; line-height: 44px; text-align: center; }
      .section .artde { padding: 0 10px; box-shadow: 1px 1px 1px 0 #ccc; }
         .section .artde p { line-height: 30px!important; }
         .section .artde .price_Item2 strong { font-style: normal; color: #ff6400; }
         .section .artde .price_Item2 em { float: right; font-style: normal; color: #ff6400; padding-right: 10px; }
         .section .artde .price_Item2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
         .section .artde .info_Item2 span, .section .artde .info_Item2 em { font-size: 12px; color: #80a1bf; font-style: normal; }
         .section .artde .info_Item2 em { float: right; padding-right: 10px; }
      .warp-content {padding:20px; }
      /*覆盖默认UI*/
      #afui .panel { padding-left: 0; padding-right: 0; }
</style>
</head>

<body>
<div id="afui">
      <div id="content">
         <div id="main" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
            <ul class="list travel_List">
                  <li>
                     <a href="#Pdetail">
                        <img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
                        <h2>长沙出发</h2>
                        <p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
                        <p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
                     </a>
                  </li>
                  <li>
                     <a href="#afuidemo">
                        <img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
                        <h2>长沙出发</h2>
                        <p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
                        <p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
                     </a>
                  </li>
                  <li>
                     <a href="#afuidemo">
                        <img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
                        <h2>长沙出发</h2>
                        <p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
                        <p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
                     </a>
                  </li>
                  <li>

                     <a href="#afuidemo">
                        <img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
                        <h2>长沙出发</h2>
                        <p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
                        <p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
                     </a>
                  </li>
                  <li>
                     <a href="#afuidemo">
                        <img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
                        <h2>长沙出发</h2>
                        <p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
                        <p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
                     </a>
                  </li>
            </ul>
         </div>
         
         <div id="Pdetail" class="panel" data-header="custom_header" data-footer="custom_footer">
            <div class="header_">
                  <h2>产品详情</h2>
            </div>
            <div class="section">
                  <a href="#">
                     <img src="http://img0.ilvxing.com/item/201406/26/53abf1e2f36cf.jpg" alt="" /></a>
                  <div class="artde">
                     <p>畅游济州|济州岛3晚4日跟团游</p>
                     <p class="price_Item2"><strong>￥1999起</strong><em>跟团游</em></p>
                     <p class="info_Item2"><span>出发地：北京</span><em>目的地韩国</em></p>
                  </div>
            </div>
            <div class="warp-content">
                  <a class="button block">出发日期：10月9日（可更改）</a>
                  详细页内容详细页内容详细页内容
            </div>
         </div>
         <header id="custom_header">
            <h1>欢迎</h1>
         </header>
         <footer id="custom_footer">
            <a href="#main" style="float: right;" class="icon home stack" data-transition="up">首页</a>
            <a href='#Pdetail' class='icon info'>详细页</a>
            <a href="#main" style="float: right;" class="icon camera">搜索</a>
         </footer>
      </div>
</div>
<script>
      $("#content").scroller({ useJsScroller: true });

      function showCustomJsonSheet() {
         $("#afui").actionsheet(
         [{
            text: '返回上一页',
            cssClasses: 'red',
            handler: function () {
                  $.ui.goBack();
            }
         }, {
            text: '10月22日（星期五）',
            cssClasses: 'blue',
            handler: function () {
                  alert("10月22日（星期五）");
            }
         }, {
            text: '12月3日（星期五）',
            cssClasses: '',
            handler: function () {
                  alert("ok（12月3日（星期五））");
            }
         },
         {
            text: '12月6日（星期五）',
            cssClasses: '',
            handler: function () {
                  alert("ok（12月6日（星期五））");
            }
         },
         {
            text: '12月2日（星期五）',
            cssClasses: '',
            handler: function () {
                  alert("ok（12月2日（星期五））");
            }
         }]);
      }
</script>
</body>
</html>