Headroom.js io-techin artikkeleiden sisällysluettelo piiloon skrollatessa *Ratkaistu*

Sampsa

Sysop
Ylläpidon jäsen
Team Tesla
Liittynyt
13.10.2016
Viestejä
12 529
Liittynyt
14.12.2016
Viestejä
100
Oletko aina halunnut testata koodia tuotannossa? Nyt se on mahdollista! Avaa selaimen konsoli Fractal Design C -artikkelisivulla ja pasteta!

JS:
Koodi:
!function(){function e(){cancelAnimationFrame(t),t=requestAnimationFrame(n)}function n(){var e=null!=window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop
if(e!==d){var n=e>d,t=document.getElementById("stigi")
n&&i?(t.className+=" stigi--hidden",i=!1):n||i||(t.className=t.className.replace(" stigi--hidden",""),i=!0),d=e}}var t,d=0,i=!0
document.addEventListener("scroll",e,!1),document.addEventListener("resize",e,!1)}()
CSS:
Koodi:
(function(){var d=document.createElement('div');d.innerHTML='<style>.stigi{transition:transform 250ms ease-in-out;transform:translateY(0%);}.stigi--hidden{transform:translateY(-100%);}.stigi--hidden.sticky-element-active{transform:translateY(0%);}</style>';document.documentElement.firstChild.appendChild(d.firstChild);})();
Oi että! Se on siellä, mutta se ei ole siellä! Se vain toimii!
 
Liittynyt
26.11.2016
Viestejä
40
Onko jollain kokemusta esim. tämän tai vastaavan skriptin käytöstä?

Headroom.js - Give your pages some headroom. Hide your header until you need it.

Tarkoituksena olisi piilottaa mukana skrollaava sisällysluettelo, kun skrollaa alaspäin ja ilmestyisi näkyviin kun skrollaa ylöspäin:

Testissä Fractal Design Define C -miditornikotelo - io-tech.fi

Ei tuo nyt äkkiseltään miltään rakettitieteeltä vaikuttanut, mutta en pikaisella kokeilulla saanut toimimaan :dead:
Eikös siitä voisi vaan poistaa siinä tapauksessa mukana skrollaus? Itse valikkohan ei paljon häiritse skrollatessa.
 

Sampsa

Sysop
Ylläpidon jäsen
Team Tesla
Liittynyt
13.10.2016
Viestejä
12 529
Eikös siitä voisi vaan poistaa siinä tapauksessa mukana skrollaus? Itse valikkohan ei paljon häiritse skrollatessa.
Pointti on se, että valikkoon pääsisi kuitenkin käsiksi keskeltä juttua..
 
Liittynyt
14.12.2016
Viestejä
100
Hienoa että löysi tiensä käyttöön asti :)

Herkkyyden säätämiseen helpoin keino on lisätä viivettä transitioon, eli lisätä ease-in-out jälkeen toinen millisekunttiarvo. Jos taas halutaan lisätä toleranssia, että efekti tapahtuu vasta kun on tietyn ajan sisällä liikuttu tietty määrä pikseleitä, niin sitten koodin kompleksisuus kasvaa hieman.


Lisäksi jos joku ohjelmointitaitoinen ihmettelee miksei tuossa toteutuksessa ole esimerkiksi debouncea, niin syyn sille löytää kokeilemalla Headroom.js:n sivua ja härväämällä useammalla eri tavalla sen kotisivun skrollauksen kanssa. Ainakin itselleni osui välistä eteen tilanne, että piilotettava elementti ilmestyikin näkyville, vaikka olin skrollannut viimeksi alaspäin. debounce estää (kenties liian suurta) osaa tapahtuneista muutoksista valumasta koodille asti, jolloin koodi tulkitsee tietyissä tapauksissa tilan eri suuntaan kuin mikä ihmisestä tuntuisi loogiselta. Ainakin itse suosin aina ennustettavaa käyttäytymistä.

Tuota koodia olisi myös mahdollista optimoida määrittelemällä var stigi funktion ulkopuolelle ja sitten korvata samainen koodinpätkä funktion sisällä muotoon stigi = stigi || document.getElement... jolloin elementtiä ei haeta jatkuvasti skrollatessa. Toinen optimointi olisi tarkistaa tukeeko selain passiivisia eventtejä ja sitten antaa addEventListenerin viimeksenä parametrina { passive: true } falsen sijasta.

Jos tulee mieleen kysymyksiä, että miksi koodi on kirjoitettu miten on, niin eiköhän tulevaisuuden minä niihin vastaile. Näinkin pienessä koodinpätkässä on lopulta kauheasti yksityiskohtia, joista voi halutessaan raataa pienen ikuisuuden. Ja toki aina voi löytää myös mielipideasioita (esim. "mikset toteuttanut WordPress-yhteensopivana jQuery-pluginina niin Sampsa olisi päässyt kokonaan ilman omaa vaivannäköä senkin aasi!" voin vastata suoraan, etten välitä opetella Wordpressiä enkä jQueryn plugineja).
 

NATi

SER-telineinsinööri
Liittynyt
20.12.2016
Viestejä
383
Ainakin Android-puhelimen kanssa pelittää hyvin.
 
Liittynyt
20.10.2016
Viestejä
323
Hyvältä näyttää. Pieni käytettävyysparannus, ainakin omasta mielestä:

Jos sisällysluettelosta valitsee jonkun otsikon, voisi sisällysluettolo jäädä näkyviin, kunnes skrollaa alaspäin. Tällä hetkellä näyttää siis pysyvän kyllä kunhan pitää hiirtä päällä, mutta jos esim. valitsee jonkun loppuosassa olevan otsikon, menee sisällysluettelo piiloon. Tämä siis lähinnä silloin, jos haluaa nopeasti hypätä otsikosta toiseen sisällysluettelon avulla.
 
Liittynyt
14.12.2016
Viestejä
100
Codepenissä oleva koodinpätkä on päivitetty siten, että se kytkee eventit pois päältä 50 ms ajaksi kun tila vaihtuu select-elementissä, joka on välittömästi stigin sisällä. Lisäsin demoon myös hyppimisen useamman eri kohdan välillä, jotta näkee muutoksien myös toimivan.

Hifistelymeiningillä laitoin uuteen setEventiin myös suojan, ettei se yritä useamman kerran peräkkäin ottaa käyttöön tai poistaa käytöstä eventtien kuuntelijoita.
 
Toggle Sidebar

Statistiikka

Viestiketjut
237 472
Viestejä
4 163 386
Jäsenet
70 414
Uusin jäsen
O&G

Hinta.fi

Ylös Bottom