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

[Sampsa]

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

 

[Merri]

Tätäkö olet kaivannut? - Nämä kahdeksan riviä CSS:ää ja 39 riviä JS:ää korjaavat kaiken!

Kyllä, suostun tekemään oliko se 30 punnerrusta... huoh.

*MUOKS!* Rivitin koodia luettavammaksi, joten rivimäärä kasvoi.

*MUOKS2!* JS vie minifioituna 485 merkkiä, alle 10% Headroom.js:n koosta.

 

[Merri]

Oletko aina halunnut testata koodia tuotannossa? Nyt se on mahdollista! Avaa selaimen konsoli Fractal Design C -artikkelisivulla ja pasteta!

JS:

!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:

(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!

 

[Locheed]

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

Eikös siitä voisi vaan poistaa siinä tapauksessa mukana skrollaus? Itse valikkohan ei paljon häiritse skrollatessa.

 

[Sampsa]

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..

 

[Sampsa]

Tämä feature on nyt käytössä io-techin artikkeleissa. Esim:

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

Kaby Lake -ylikellotustesti: i7-7700K & i5-7600K - io-tech.fi

Palaute tervetullutta! (pitääkö herkkyyttä esim. säätää?)

Iso kiitos @Merri !

 

[Merri]

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]

Ainakin Android-puhelimen kanssa pelittää hyvin.

 

[Zerby]

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.

 

[Merri]

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.