PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   HTML, CSS und JavaScript Help! (http://www.selfphp.de/forum/forumdisplay.php?f=24)
-   -   Position fixed - mobile Browser (http://www.selfphp.de/forum/showthread.php?t=25915)

Fake 20.08.2016 17:27:54

Position fixed - mobile Browser
 
Hat jemand Erfahrung mit mobilen Browsern?

Ein ganz simples Beispiel...

Ich möchte einen fixierten header, der sowohl fixiert bleibt, wenn der
Content darunter die Fenstergröße überschreitet, als auch die Fensterbreite.

Die Y - Achse selbst ist kein Problem.
Beim Scrollen in (Win)Browser bleibt der header fixiert.

Die X - Achse ist aber das Problem.
Beim Scrollen in (Win)Browser bleibt der header ebenfalls fixiert.

Beim Scrollen nach rechts im mobilen Browser schiebe ich das fixierte Element,
besser gesagt den Text darin, dann nach links aus dem Sichtfeld heraus. Der
header hat 100% der Fensterbreite, also auch dessen Hintergrund, aber er ist
eben keines falls fixiert wie im Browser.

HTML-Code:

.header
{
        background: #202020;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        color: #fff;
}

                <div class="header">
                        test
                </div>

                <div>
                        <div style="width: 2000px; height: 2000px;">123</div>
                </div>

Das wäre das simpelste Beispiel, dass ich machen kann.

Im Browser ist der header auf X und Y - Achse fixiert.
Im mobilen Browser schiebe ich den Text "test" im header beim Scrollen
nach rechts, links aus dem Bild raus. Die Y - Achse ist okay.

Ich habe breits alle möglichen Tipps probiert und gesucht und gesucht
und keine Lösung für Android und iOS gefunden. Hat jemand einen Tipp?


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:07:59 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.