Question

我需要一个jQuery Mobile固定页脚，但是在为移动网站设计的HTML5页面的iframe中。在过去的两天里，我一直在苦苦挣扎，因为固定的jQuery Mobile页脚到了iframe的底部，很多次都在视图端口之外，因此不是理想的行为

外部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中。请帮帮忙，我一段时间都在努力。

JqueryMobile固定iframe中的位置

0 个答案: