android – 固定标题在jquery mobile中滚动/拖动

我正在使用jquery mobile和phonegap开发移动网络应用程序.我开发了一个hello world app.它有页眉,页脚和内容区域.使用data-position =“fixed”属性修复页眉和页脚.但是页眉和页脚的问题是,当我向下滚动并且当内容完成并且不再需要滚动时,其标题向下拖动(为了灵活性或指示并且没有更多内容).与其他ios应用程序一样,此功能仍然存在,但在这些应用程序中,页眉和页脚不会在内容区域上下拖动.请看图片我的意思

如上图所示,标题被拖向底部,我不想要.我只希望内容区域具有此功能.我怎样才能这样做,以便只有当没有更多内容可供查看时,内容区才会拖动?

任何帮助css,jquery或jquery移动技巧?

更新

HTML代码在这里

<div data-role="page">

        <div data-role="header" id="header" data-position="fixed">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="contents">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
最佳答案
不幸的是,你的例子不会起作用,因为iOS不会允许你.

解决方案1 ​​ – iOS和Android

值得庆幸的是,有一个第三方jQuery Mobile插件可以帮助你解决这个问题,它就像一个魅力.这是iOS和Android解决方案.

你需要的是一个基于iScroll插件制作的iScrollView插件.

我不能让你成为一个jsFiddle示例,因为它不能与iScrollView一起工作,至少我不能让它工作所以这里有一个例子,你可以复制到新的HTML文件并在你的iOS上试用它.

首先,这是我在网上做的一个例子:http://www.fajrunt.org/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Demo</title>

    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
    <link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />   

    <script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
    <script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>    
    <script src="http://www.fajrunt.org/js/iscroll.js"></script>
    <script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script> 
</head>

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

    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
        <h1>INDEX PAGE</h1>
    </div>

    <div data-role="content" class="example-wrapper" data-iscroll>
        <p>some content that will be scrolled</p>
        <p>Some more content that will be scrolled</p>
        <ul data-role="listview">
        <li>Item 1</li>
        <li>Item 2</li>
        </ul>
        <p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>
        <h1>Hello Cirrus.</h1>         
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
        <h1>My Footer</h1>
    </div>

    </div>
</body>
</html>

正如你所看到的,这个例子就像魔法一样.还有一件事,如果您不知道iScrollview还可以修复另一个问题.假设您已滚动到页面底部,并且有另一页的按钮.当您单击它时,页面将跳转到顶部,然后页面将转换到另一个页面.这不是错误,这只是视点的工作原理.但是对于iScrollView你的页面只会从那一点开始转换,当你回来时你的页面仍然会处于相同的位置.

最后一件事如果你是iOS开发人员,iScrollView与UIScrollView没有任何关系.

解决方案2 – 仅限iOS

有一个纯css修复你的问题,但它只适用于iOS,这是我作为第二个解决方案显示它的方式.

这不是我的解决方案,官方页面可以在这里找到:http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/

通过一些页面更改,您可以使用jQuery Mobile启动iOS页面滚动.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Scrollable Content Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- jQuery Mobile styles -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <!-- Fix for scrolling on iOS prior to iOS 6 -->
    <style type="text/css">
        body {
            margin: 0;
        }

        div#container {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

        div[data-role="header"] {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        div[data-role="content"] {
            position: absolute;
            top: 41px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .scrollable {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

            /* iOS specific fix, don't use it on Android devices */
        .scrollable > * {
            -webkit-transform: translateZ(0px);
        }
    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).one('mobileinit', function () {

            // Setting #container div as a jqm pageContainer
            $.mobile.pageContainer = $('#container');

            // Setting default page transition to slide
            $.mobile.defaultPageTransition = 'slide';

        });
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
<div id="container">

    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Scrollable Content</h1>
        </div>

        <div data-role="content" class="scrollable">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>   
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer</h1>
        </div>      
    </div>

</div>
</body>
</html>

最后一个问题

关于你的第二个问题.当你最终到达底部或者如果你在页面的顶部,你将无法防止弹跳.只有这样才能防止弹跳,如果你阻止滚动.在您的情况下,这不是选项,您需要滚动才能访问页面底部.

最后的笔记

如果您想了解有关iScroll iScrollView的更多信息,以及它们如何使用工作示例,请查看此article.

转载注明原文:android – 固定标题在jquery mobile中滚动/拖动 - 代码日志