Autor Zpráva
anonymníí
Profil *
Ahoj,

mám pod sebou v HTML několik blokových elementů a potřeboval bych udělat efekt, který nevím, jak bych pro vyhledávač pojmenoval (přestože asi něco takového už někdy někdo tvořil). Bude to takový zdánlivý paralax, nebo nepravidelné skrolování. Popíšu níže pod kódem.

<div class="w">  ...</div>
<div class="w t">...</div>
<div class="w">  ...</div>
<div class="w t">...</div>
<div class="w">  ...</div>
<div class="w t">...</div>
<div class="w">  ...</div>
<div class="w t">...</div>

<script>
    // horni pozice daneho bloku
    var s = [
        $('.t:eq(0)').offset().top,
        $('.t:eq(1)').offset().top,
        $('.t:eq(2)').offset().top,
        $('.t:eq(3)').offset().top
    ];

    $(document).on('scroll resize', function() {
        $('.t').each(function() {
            var t = $(this);
            var scroll = $(window).scrollTop();

            var ind = Math.floor(t.index() / 2); // vraci stejne indexy jako v poli "s"

            if (scroll >= t.offset().top) {
                t.css({position: 'fixed'});
            }
            if (ind == 1 && scroll < s[1]) {
                t.css({position: 'relative'});
            }
            if (ind == 2 && scroll < s[2]) {
                t.css({position: 'relative'});
            }
            if (ind == 3 && scroll < s[3]) {
                t.css({position: 'relative'});
            }
        });
    });
</script>

Mějme několik obalů (class="w", jednotlivé bloky), z nichž jsou 4 označeny třídou "t", která se má chovat tak, že se normálně skroluje se stránkou (position: relative;) a v momentě, kdy se dostane na horní hranu stránky, zůstane tam fixovaná (JS změna na position: fixed). Přes ní jde další obsahový obal ("w") a zdola další "t", který pak opět zůstane fixovaný nahoře.

Při skrolování zdola nahoru vše bude fungovat stejně, akorát opačně - "t" bude fixovaný a když se dostanu nad něj, změní se na relativní a pojede se stránkou normálně pryč.

Pomůžete mi, pod čím hledat? Případně pomoci opravit? Nápady došly a tohle nefunguje zcela spolehlivě. Někdy se mi dokonce ani nemění pozice z fixní na relativní a opačně.

Na telefonu (iphone) už vůbec ne, tam se mi pozice po skrolování (onscroll) přepočítává až po doskrolování (třeba po 200px), nikoliv průběžně jako na desktopu.
Chamurappi
Profil
Reaguji na anonymníího:
Pokud změníš pozici z relativní na fixní, tak jednak v původním místě elementu zmizí důvod, aby pro něj bylo vynechané místo (co je fixní a absolutní, to nic nezabírá, zbytek poskočí), jednak potom nemůžeš zjistit, na jaké pozici by element byl, když by fixní nebyl, protože měříš jeho současnou pozici a ta je už konstantní. (Funkce offset() v jQuery mimochodem funguje tak, že zjistí pozici elementu vůči obrazovce a přičte k ní narolování okna.)

Řešením je buď v okamžiku zafixování vyrobit v původním místě nějakou stejně velkou náhražku a pak sledovat její pozici, nebo mít kolem fixovaného elementu pevně velký obal a opět sledovat spíš jeho pozici, než pozici toho, co se fixuje.

Na telefonu (iphone) už vůbec ne, tam se mi pozice po skrolování (onscroll) přepočítává až po doskrolování (třeba po 200px), nikoliv průběžně jako na desktopu.
Na Windows Phone také. Pokud vím, tak jen některé Androidy hlásí onscroll průběžně. Co vím, tak na to neexistuje řešení.
anonymníí
Profil *
Chamurappi:
Je tam ještě placeholder, který to volné místo drží. Kód zde jsem trochu zjednodušil.

Co vím, tak na to neexistuje řešení.
Hm, to není příjemné zjištění.

Vzhledem k tomu, že ke zbytku ses nevyjadřoval, jiný způsob, než pro každý element sledovat při každém skrolování pozici a porovnávat, není? Budu si muset vystačit s tím, co jsem uváděl v #1?

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: