Sticky header con sostituzione immagini logo

[yalesh]

Ciao a tutti,
premetto che in Javascript sono una pippa, pertanto perdonatemi se la richiesta che sto per farvi sarà elementare.


Sto cercando di fare queste 2 cose:


1) uno sticky header che oltre ad agganciarsi al top della pagina dopo tot px di scroll (questo sono riuscito a farlo), carichi una versione semplificata del logo. In sostanza al caricamento della pagina mostri logo.png, dopo lo scroll diventa logo2.png


2) Oltre a questo vorrei che il logo fosse diverso a seconda della dimensione dello schermo. Dunque logo_desktop.png, logo_mobile.png




Avreste uno script da indicarmi o qualche dritta?
Help meee!

[cavicchiandrea]

Ciao a tutti,
premetto che in Javascript sono una pippa, pertanto perdonatemi se la richiesta che sto per farvi sarà elementare.


Sto cercando di fare queste 2 cose:


1) uno sticky header che oltre ad agganciarsi al top della pagina dopo tot px di scroll (questo sono riuscito a farlo), carichi una versione semplificata del logo. In sostanza al caricamento della pagina mostri logo.png, dopo lo scroll diventa logo2.png

Senza codice diventa difficile, comunque quando i tot px dello scroll cambi percorso inserendo il percorso di logo2

2) Oltre a questo vorrei che il logo fosse diverso a seconda della dimensione dello schermo. Dunque logo_desktop.png, logo_mobile.png

Cerca su Google "sniffer browser" trovi diversi script pronti e tutorial

Avreste uno script da indicarmi o qualche dritta?
Help meee!

[Little Hawk]

Non puoi semplicemente cambiare il valore dell'attributo src dell'immagine? (se e' un IMG tag, altrimenti se e' un background CSS ti basta cambiare class).

Per la seconda domanda forse window.screen.availHeight e window.screen.availWidth possono essere utili?
Potresti usare anche media queries con CSS senza usare JavaScript cmq.