Modificare navbar in base allo scroll

gego

Nuovo Utente
14 Ott 2016
5
0
1
28
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
590
25
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
28
Già provata una cosa simile, ma così la barra rimane così come è :confused:
 

otto9due

Utente Attivo
22 Feb 2014
590
25
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
28
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
590
25
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
28
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [cerco webmaster] sito web da modificare Offerte e Richieste di Lavoro e/o Collaborazione 0
G Come modificare un pdf in php PHP 1
napuleone modificare il valore dellascroll bar di webkit HTML e CSS 8
Shyson Modificare codice e creare link PHP 0
J Modificare panorami 360 ps 2020 Photoshop 0
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
D modificare questo codice per inserimento in text e non in tabella jQuery 1
C modificare sito in locale con dreamWeaver HTML e CSS 3
T Modificare ruolo utenti in fase di registrazione E-Commerce 0
M modificare un file .XML da database Sql PHP 13
S Modificare intestazione documento pdf con LO Draw Linux e Software 0
felino Radio button e Bootstrap: modificare il colore di default! HTML e CSS 1
Shyson Modificare funzione php PHP 15
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
F Modificare report di etichette di access con vba MS Access 0
D [PHP] Tabella: modificare direttamente i valori PHP 6
P [Woocommerce] Modificare il Bottone Checkout di Woocommerce in base alla categoria di prodotto E-Commerce 10
Q impossibile modificare un file ....... C/C++ 2
C [HTML] modificare la scritta della copyright HTML e CSS 2
G [PHP] MODIFICARE DATI TABELLA CONTESTUALMENTE PHP 6
Y [PHP] [HTML] Modificare i quadranti PHP 1
A [PHP] Modificare campo database in base alla scelta dell'utente PHP 2
W Non riesco più a modificare i dati di una tabella da phpmyadmin MySQL 0
V [WordPress] Come modificare link in tasto menu css WordPress 21
Y Modificare script php PHP 5
G Fullcalendar: modificare colore testo, backgroup e bordi per tutti gli eventi jQuery 3
paloppa Bootstrap.min.css modificare il file HTML e CSS 6
Merlina3377 [PHP] modificare file su form immagine thump PHP 1
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
pfranco [PHP] Modificare pagina web online PHP 9
Shyson Modificare codice jQuery 0
A [Javascript] modificare il contenuto della barra indirizzi di un browser Javascript 1
asevenx modificare lista elementi togliendo l'elemento selezionato jQuery 1
Kolop "Modificare HTML" HTML e CSS 13
K [ASP.Net] Utilizzare e modificare dati linq ASP.NET 0
R [Photoshop] Modificare luminosità dei bordi in una foto Photoshop 2
A come modificare gli elementi di una lista e gli editText? Sviluppo app per Android 0
A modificare .jar con classe personalizzata Java 9
Mer556 BLOCCATO nel modificare un sito HTML e CSS 3
T modificare un template html5 HTML e CSS 6
B Modificare sorgente di pagina HTML e CSS 10
napuleone Modificare attributi di una classe con js Javascript 2
C modificare un rss con php PHP 2
L Modificare dati tabella mysql PHP 2
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
X come modificare paginazione del tutorial PHP 0
A modificare posizione plug in almeno credo WordPress 3
R Modificare html in modo dinamico PHP 3

Discussioni simili