Modificare navbar in base allo scroll

gego

Nuovo Utente
14 Ott 2016
5
0
1
24
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

Utente Attivo
22 Feb 2014
529
21
28
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

Nuovo Utente
14 Ott 2016
5
0
1
24
Già provata una cosa simile, ma così la barra rimane così come è :confused:
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
Guarda a me così funziona :p
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..
 
Ultima modifica:

gego

Nuovo Utente
14 Ott 2016
5
0
1
24
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

Utente Attivo
22 Feb 2014
529
21
28
Perdonami ma non ho ben capito cosa vuoi ottenere.. Mi sembra che animate possa gestire solo valori numerici..
 

gego

Nuovo Utente
14 Ott 2016
5
0
1
24
Scusa, mi sono spiegato male molto probabilmente :D
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.