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/
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).
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);} ); });
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.
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
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.
Aihe on jo aika vanha, joten et voi enää vastata siihen.