Geek Answers Handbook

Phonegap 2.8 Position: fixed does not work properly

After spending 16 hours and sacrificing creatures to various gods, I must regret to say that I am on the verge of mental decay.

I am writing a PhoneGap 2.8 application for Android (in the future it will be connected to iOS). As the main frameworks I use jQuery (with many plugins), Require, Underscore and Backbone. One fateful morning, I received a task that the title menu of my application should "imitate" how the facebook application header does (follow the scroll).

At first, I thought that adding the position: fixed attribute to the header div would be easy enough if I never made a mistake. As it turned out, the position: the fixed css attribute is not working properly in WebView, and the problem has stood for many years. This problem was discussed in detail at various forums and articles, and various "solutions" were proposed - in my case, no one works.

I tried to set the position of the title fixed when scrolling and absolute when scrolling. Theoretically this works, but it is laggy. After trying, I looked at various plugins or frameworks that could help in this matter. iScroll - imposes the specified html structure and a serious lack of documentation pushes me away from it. jQueryMobile. Since this is a whole structure, integrating it with my project will mean changing a large amount of material. As far as I understand, it will not provide a permanent header.

I heard about Bartender and GloveBox, but none of them have documentation, and they are not in constant development (the last commits are already a year old).

jsHybugger, , : . , , div, , , . , , , hitarea . , WebView ?

.

+4
2

, , fiddle , position:fixed. , , , .

HTML

<div class="page-wrapper">
    <div class="header"><h3>header</h3></div>
    <div class="content-wrapper">
        <div class="content">
          <!-- Your content goes here -->
        </div>
    </div>
</div>


CSS

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.page-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.header {
    position: absolute;
    top:0;
    left:0;
    right:0;
    padding: 3px 0;
    color: #FFF;
    background: #000;
    text-align: center;
}
.content-wrapper {
    position: absolute;
    padding:0;
    top: 65px;
    left: 0;
    right: 0;
    bottom:0;
    background: #CCC;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.content {
    padding: 15px;
}
+4

. : Android 4.0 css:

<div class="header"> this is fixed positioned div<div>

Css:

.header{ position:fixed ; -webkit-backface-visibility: hidden;  top:0; left:0; width: 100px; height:30px; background: red; }
+1

More articles:


All Articles