Modificare navbar in base allo scroll

gego · 3 Nov 2016

Ciao a tutti. In un sito che sto facendo vorrei il seguente comportamento della navbar: quando l'utente si trova all'inizio della pagina la barra di navigazione ha una larghezza del 50% e un margine superiore di 30px.
Quando invece scrolla verso il basso la pagina, la barra di navigazione deve avere un margine superiore di 0px e deve rimanere fissa in alto oltre ad avere una larghezza del 100%. Io sono riuscito a fare con jQuery un codice che dovrebbe fare tale cosa con un'animazione solo che qui nasce un problema: quando l'utente scrolla verso il basso è tutto ok, ovvero la barra di navigazione con un'animazione assume i parametri che gli ho assegnato, quando però l'utente (senza ricaricare il sito) ritorna all'inizio della pagina la barra rimane così com'è e non ritorna nella condizione iniziale. Di seguito posto la porzione di codice che dovrebbe fare questa cosa. Grazie a chiunque mi aiuterà

HTML:

$(window).scroll(function(){
   if($(document).scrollTop() > 100){
         $('nav').animate({
             top:'-35px',
             width: '100%'
         });
    }
    if($(document).scrollTop() < 100){
                $('nav').animate({
                 top:'35px',
                 width: '50%'
                });
            }

otto9due · 3 Nov 2016

Prova una cosa del genere ( non l'ho verificata perchè sn da cell ) :

Codice:

$(window).scroll(function(){  
             
            var somma = 600;// i px dopo i quali parte tutto
            if($(this).scrollTop()>=somma){
// qui l'azione da compiere
            }else{ // se si rientra sotto i px indicti..
                // qui altra azione da compiere..
            }
        });

Ripeto, l'ho scritta dal cell, verifica le varie parentesi qualora non andasse, al momento non ho modo di verificare.

gego · 3 Nov 2016

Già provata una cosa simile, ma così la barra rimane così come è

otto9due · 4 Nov 2016

Guarda a me così funziona

Copialo così com'è e salvalo come html per testarlo..

HTML:

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
            var somma = 600;// i px dopo i quali parte tutto
            if($(this).scrollTop()>=somma){
            $("#sposta").css({
                                "width" : "100%",//larghezza prima
                            });
            }else if ($(this).scrollTop()<somma){ // se si rientra sotto i px indicti..
             $("#sposta").css({
                                "width" : "50%", //nuova larghezza
                                "position" : "fixed", // imposta la visualizzazione fixed
                                "top" : "30px", //distanza dal top
                                "margin-top" : "0",
                            });
            }
        });
    });
</script>
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>

<body style="height:7000px">
<div id="sposta" style="background-color: red; height: 100px; width: 50%; margin-top: 30px;">

</div>
</body>
</html>

Fammi sapere, c'è da apportare qualche piccola modifica, giusto per rendere l'effetto perfetto ma funziona..

gego · 4 Nov 2016

Innanzitutto grazie per la risposta. Il codice da te postato funziona perfettamente, l'unica cosa adesso è che con la funzione "animate" funziona male: la navbar, per esempio, quando scrollo giù assume i valori del css che dovrebbe assumere quando sto a inizio pagina, poi magari se vado su la navbar assume gli altri valori css. Conosci magari qualche altro metodo? Grazie ancora

otto9due · 4 Nov 2016

Perdonami ma non ho ben capito cosa vuoi ottenere.. Mi sembra che animate possa gestire solo valori numerici..

gego · 4 Nov 2016

Scusa, mi sono spiegato male molto probabilmente

Io voglio ottenere esattamente quello che hai scritto pure tu sul codice che hai postato prima. Con quel codice, quando scrollo la pagina versi giù, la navbar assume questo valore:

HTML:

"width" : "100%"

E fino a qui ci siamo! In questo caso però, il passaggio tra width dal 50% al 100% è netto. Io quindi vorrei che, per esempio, il passaggio dal 50% al 100% sia fatto con un'animazione. Sinceramente non so se animate possa gestire solo valori numerici o meno, ma io ho già cercato in giro per il web e lo usavano come l'ho usato io.

Cerca

Cerca

Modificare navbar in base allo scroll

gego

Nuovo Utente

otto9due

Utente Attivo

gego

Nuovo Utente

otto9due

Utente Attivo

gego

Nuovo Utente

otto9due

Utente Attivo

gego

Nuovo Utente

Discussioni simili