Molto spesso, su siti ricchi di contenuti, il visitatore si perde nella pagina e deve scorrere fino all'inizio della pagina per trovare il menu di navigazione. Le tecnologie non si fermano, gli schermi dei monitor e le loro risoluzioni stanno diventando più grandi, quindi ora su un sito non è più un peccato allocare 40 pixel in alto per un menu fisso quando si scorre una pagina del sito. Il visitatore potrà sempre vedere in quale sezione si trova, oltre ad avere un accesso rapido al menu di navigazione. In definitiva, questo aumenta la profondità della navigazione nel sito :)
Qual è l'essenza di un menu di navigazione fisso su un sito web? Inizialmente, il nostro menu si trova al suo posto abituale, da qualche parte nell'intestazione, nel mio caso a una distanza di 140 px dal bordo superiore. Non appena il visitatore scorre la pagina di questi stessi 140px in basso, il menu viene fissato nella parte superiore della finestra e rimane lì per il resto del tempo finché lo scorrimento non torna nella posizione superiore.
Un menu fisso durante lo scorrimento di una pagina è essenzialmente un pannello di controllo sempre con te. Il nostro menù sarà semplice.
Dalla teoria alla pratica. Tutto è abbastanza semplice e minimalista, la maggior parte del quale è data a stili che puoi personalizzare per te stesso. Ho realizzato un menù fisso come in foto; quando lo si scorre, il colore del menù diventa leggermente trasparente in modo che non sembri pesante e sia visibile il contenuto sottostante.
I nostri stili. Ho un menu con una larghezza di 1180px, situato al centro. L'header è alto 180px, il menù scorrevole è incluso al suo interno e occupa 40px. Ciò significa la distanza dalla parte superiore 140px. Ricordiamo questo numero)
#header (altezza: 180px; ) #navigazione( sfondo: #EF0505; altezza: 40px; box-ombra: 0 2px 2px rgba(0, 0, 0, 0.4); dimensione carattere: 16px; altezza linea: 40px; posizione: relativa; superiore: 140px; ) #navigation.fixed( posizione: fissa; superiore: 0; larghezza: 100%; sfondo: rgba(239, 5, 5, 0.95); ) #navigation ul( larghezza: 1180px; imbottitura -sinistra: 0; margine: 0 automatico; display: blocco; ) #menu li( float: sinistra; stile elenco: none; riempimento: 0 25px; bordo destro: 1px solido #D60000; ) #menu a ( colore: #fff; decorazione del testo: none; famiglia di caratteri: Verdana; ) #menu>li a:hover( colore: #656565; transizione: colore 0.5s facilità; )
Ed ecco le poche righe di codice che fanno la magia) Impostiamo le condizioni per lo scorrimento della pagina, sopra 140px o sotto. A seconda di ciò, la classe fissa viene assegnata al nostro menu di navigazione. E con questa classe, come detto sopra, rendiamo il menu fisso e bloccato in alto.
JQuery(funzione($) ( $(finestra).scroll(funzione())( if($(this).scrollTop()>140)( $("#navigazione").addClass("risolto"); ) else if ($(questo).scrollTop()
Tieni presente che se nel codice racchiuso in echo "" sono presenti virgolette singole, sarà necessario eseguirne l'escape, ad es. metti una barra rovesciata (\") davanti a ciascuno di essi, ovviamente senza parentesi.
In generale, si è scoperto come si è scoperto. Dovrai decidere tu stesso come collegarlo specificamente al tuo argomento: quando hai tempo, è persino divertente "scervellarti". Grazie.
Buona fortuna a te! A presto sulle pagine del blog del sito
Potresti essere interessato
WebPoint PRO è un tema WordPress reattivo con ampie funzionalità e ottimizzazione tecnica competente per i motori di ricerca 
Share42 - uno script per aggiungere pulsanti e segnalibri di social network al sito (esiste un'opzione di pannello mobile)
Che si trovano sempre più spesso sulle pagine di blog e altre risorse. L'uso di tali barre di navigazione è abbastanza giustificato. Uno dei motivi principali per l'utilizzo attivo di questi plugin jQuery è che il menu è sempre a portata di mano del visitatore, anche se si trova in fondo alla pagina. Inoltre, un menu fisso occupa poco spazio e non distoglie l'attenzione dal contenuto principale. In generale un menù fisso migliora l’usabilità del sito.
Ho messo insieme una raccolta dei migliori plugin jQuery gratuiti, a mio avviso, per l'implementazione di un menu fisso. Ho cercato di garantire che ciascuno dei plugin fosse in qualche modo unico, in modo che qualsiasi plugin della selezione potesse essere utilizzato specificamente nel tuo progetto. Nella raccolta puoi trovare plugin sia semplici che più complessi con animazioni, ecc.
Se hai bisogno di un menu fisso molto semplice, un po' come abbiamo implementato un pannello adesivo con pulsanti social, puoi fare a meno dei plugin jQuery, perché caricare la pagina con gli script non è un granché, ma di questo ne parleremo nei prossimi articoli. Iscriviti al nostro canale o alle nostre pagine per non perdere materiali interessanti.
COSÌ. Ecco 6 plugin jQuery per creare un menu fisso.
