1

jQuery Mobile の固定フッターが必要ですが、モバイル Web 用に設計された HTML5 ページの iframe 内にあります。固定されたjQuery Mobileフッターがiframeの下部に移動するため、過去2日間苦労していましたが、これは何度もビューポートの外にあるため、望ましい動作ではありません

外側の HTML

       <!DOCTYPE html>
        <HTML>
         <HEAD>
          <TITLE> New Document </TITLE>
          <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery-1.9.1.min.js"></script>
         <SCRIPT LANGUAGE="JavaScript">
          <!--
             $(document).ready(function(){   
                     $(window).scroll(function () {
                         document.getElementById('myFrame').contentWindow.placeToolbar();
                    });
              });  

            function getToolbarPosition(){ 
              var returnheight=$(window).height()-$("#myFrame").position().top-40;
              return returnheight;
            }
          //-->
          </SCRIPT>
         </HEAD>

         <BODY>

               <iframe src="inner.html" width="100%" height="800px" id="myFrame" scroll="auto"/>

         </BODY>
        </HTML>


    INNER.HTML
    <!DOCTYPE html>
    <html>
    <head>
     <script>
      function placeToolbar(){
          placebar();
      }

      function placebar() {
$("#footerid").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft": "1px"}, "slow" );
      }

    $(document).ready(function() {

      function positionToolbar() {
          placebar();
      }

      positionToolbar();
    });
    </script>

     <body>
     <div data-role="page">

        <div data-role="header" data-position="fixed">
                <h1>Fixed Header!</h1>
        </div>

         <div data-role="footer" id="footerid" >
                <h1>Fixed Footer!</h1>
        </div>
    </div>
  </body>
</html>

これはうまくいきますが、divのスクロールはスムーズではなく、スクロールイベントは上下にスワイプするのをやめたときにのみ発生します。そのため、スワイプ中にフッターとビューポートの下部の間にギャップがあり、フッターがスワイプを停止するか、タッチを離した後にのみ下に移動します。メインページのフッターとまったく同じように機能するソリューションが必要ですが、iframe 内に配置したいのです。助けてください、しばらくの間本当に苦労しました。

4

0 に答える 0