1

我希望在不使用 jQuery mobile 的情况下获得一个固定的标题。

我从谷歌找到了一个详细说明如何实现此功能的页面，但他们遗漏了一些代码作为“用户练习”

这段代码有点超出我的理解，我无法弄清楚，有没有人这样做过，或者任何人都可以弄清楚“缺失”的代码应该是什么？

https://developers.google.com/mobile/articles/webapp_fixed_ui

还是有人有更好/更简单的方法？（再次，请不要使用 jQuery 移动版）

任何帮助，将不胜感激！谢谢

4

1 回答 1

2 
<html>
<head>
</head>
<body>
    <style>
        body
        {
            margin: 0;
            padding: 0;
        }
        .TOP_TOOLBAR,
        .BOTTOM_TOOLBAR {
            height: 50px; width: 100%; position: fixed;background: #ccc;z-index: 10;
        }
        .TOP_TOOLBAR {
            top: 0;
        }
        .BOTTOM_TOOLBAR {
            bottom: 0;
        }
        .SCROLLER_FRAME {
            width: 100%; position: absolute; top: 50px; bottom: 50px;
        }
    </style>
    <div class="TOP_TOOLBAR">
        ... toolbar content ...
    </div>
    <div class="SCROLLER_FRAME">
        <div class="SCROLLER">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin molestie augue vel venenatis. Maecenas sit amet dui vitae odio posuere tempus eu eu ante. Mauris scelerisque sagittis iaculis. Praesent posuere id sem vel iaculis. Praesent mollis feugiat mauris. Integer consectetur dui nibh, in hendrerit est fermentum quis. Nunc porttitor diam sit amet nisl convallis molestie. Pellentesque ligula odio, feugiat eget pellentesque ut, varius ut ligula.</p>

            <p>Sed aliquam, nisi quis condimentum accumsan, quam neque varius massa, et aliquam dui diam vitae erat. Nullam commodo blandit sollicitudin. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum leo urna, et adipiscing leo porttitor vitae. Nam ultrices rutrum orci, eget ultricies elit tempus a. Etiam pellentesque tellus sodales fermentum sodales. Vivamus ipsum arcu, tincidunt et quam sit amet, aliquet sollicitudin risus.</p>

            <p>Phasellus id fermentum nibh. Donec lacus nisi, placerat at tortor dignissim, imperdiet consectetur odio. Praesent id eros diam. Curabitur felis enim, porta nec faucibus et, rhoncus vel turpis. Quisque eu orci posuere, mattis purus vel, iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam semper luctus nulla gravida congue. Nullam rhoncus gravida arcu, at cursus urna porttitor ut. Fusce vehicula malesuada metus, non placerat velit. Nullam ut justo dui. Aenean eget erat eu purus vestibulum blandit. Donec viverra dictum tellus sed congue. In iaculis egestas pharetra. Nulla sollicitudin, justo ut congue elementum, lorem mauris ultrices turpis, non tincidunt leo libero quis lorem.</p>

            <p>Donec eu euismod ligula. Vestibulum nec ornare urna. Aenean tempor ligula nisi, vitae iaculis felis pretium a. Suspendisse sollicitudin ac purus eu consequat. Fusce elementum rhoncus gravida. Nullam gravida, est eget vehicula condimentum, mauris quam laoreet libero, ac convallis nulla quam ac velit. Nunc a aliquet enim. Praesent volutpat, massa ultricies adipiscing porta, lectus urna molestie orci, vel aliquam tellus nibh sit amet justo. Donec venenatis sed augue id varius. Ut bibendum nunc ut nisl venenatis, nec varius dui commodo. Praesent urna mi, sagittis vel congue ac, dapibus at urna. Maecenas auctor tortor dapibus leo laoreet vestibulum.</p>

            <p>Pellentesque sit amet suscipit ante. Nullam nec urna in arcu faucibus cursus pharetra sit amet lacus. Quisque eu bibendum diam, eget suscipit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper, nulla vel egestas interdum, mauris dui pretium lectus, et gravida dolor sapien vel risus. Aenean id ante interdum augue tristique cursus ut eu magna. Ut nisi elit, sollicitudin in justo vitae, facilisis commodo magna. Integer suscipit, lectus sed aliquam iaculis, erat lacus lacinia ipsum, ut rhoncus sem neque ac tellus. Sed sit amet varius velit. Curabitur sit amet tellus luctus, consectetur lacus et, pharetra tellus. Morbi leo lorem, condimentum in justo non, volutpat ornare quam.</p> 
        </div>
    </div>
    <div class="BOTTOM_TOOLBAR">
    ... toolbar content ...
    </div>
</body>

这对我有用，我唯一改变的是位置fixed

于 2013-06-12T14:08:10.153 回答