Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Fadeout ongelma [JS]

tiituus [24.01.2014 21:06:43]

#

Voisitko joku helppiä, en vaan tajua.
Ongelmana on, että Logon ja searchin paikat kusee, kun scrollaa ylöspäin takas, koska navigaatio generoituu niiden päälle.
Tajuatte varmaan: http://melondia.com/

Metabolix [24.01.2014 21:27:40]

#

Tee näin: Ota navigaatio ensin kokonaan pois ja tee sivu niin, että muut elementit ovat oikeilla paikoillaan ja logon yläpuolella on navigaatiolle riittävä tyhjä tila. Laita sitten navigaatio tuohon tyhjään tilaan. Tässä vaiheessa sivulla ei pitäisi olla vielä mitään JS-koodia (tähän asiaan liittyen). Vasta viimeiseksi tee se JS-kikkare, joka skrollattaessa asettaa navigaatiolle oikean CSS:n position-asetuksen (yläreunassa absolute, alempana fixed).

tiituus [24.01.2014 21:45:20]

#

Nyt kusee enään, ettei navigaatio generoidu sivua ladatessa.
Javascript:

$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
            $('.fade').stop().animate({'opacity':'0.4'},2000).css({'position':'fixed','z-index':'5000'}):
            $('.fade').stop().animate({'opacity':'1'},2000).css({'position':'absolute','top':'0px'});
    });
    $('.fade').hover(
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},2000);},
        function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'0'},2000);}
    );
});

The Alchemist [25.01.2014 09:09:52]

#

Navigaatiota ei pidä tehdä javascriptillä. Se pitää tulostaa html-dokumenttiin staattisena. Sivun latauduttua voit asentaa siihen javascriptillä eventhandlereita tekemään ihmeitä. Toivottavasti kukaan ei nyt auta sinua tekemään asioita naurettavalla tavalla väärin.

tiituus [25.01.2014 09:50:06]

#

The Alchemist kirjoitti:

Navigaatiota ei pidä tehdä javascriptillä. Se pitää tulostaa html-dokumenttiin staattisena. Sivun latauduttua voit asentaa siihen javascriptillä eventhandlereita tekemään ihmeitä. Toivottavasti kukaan ei nyt auta sinua tekemään asioita naurettavalla tavalla väärin.

Navigaation on asetettu PHP Dokumenttiin, mutta javascript ei oloe vahvin lajini, joten en keksi mikä mättää, ja miksi ei tulostu

The Alchemist [25.01.2014 12:04:20]

#

Jossei se tulostu dokumenttiin, niin silloinhan se ei ole staattista html:ää eli teet edelleen väärin. Javascript ei hallitse navigaation tulostusta. Lähde liikkeelle siitä, että se navigaatio näkyy halutussa paikassa halutunlaisena ilman mitään js-purkkaa. Vasta sen jälkeen otat js:n esille ja alat miettiä, että miten toteutat sticky nav -ominaisuuden.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta