Menu fisso copre i titoli quando cliccati nel sommario jQuery

Cosina

Utente Attivo
27 Dic 2016
100
0
16
Buongiorno a tutti. Difficile spiegarsi nel titolo. In pratica, ho un sommario dei titoli h2 h3 creato con un codice jQuery che posto sotto. Il problema è che ho un menu orizzontale fisso. Quando clicco su una voce del sommario, la pagina scrolla fino al titolo relativo, ma tale titolo appare coperto dal menu fisso. Avrei bisogno di abbassare la posizione del titolo allo scroll. Non so come risolvere e attendo consigli. Grazie mille.

JavaScript:
function summary() {   
 log('loading summary')                                                             
 $('#tocList').empty();                                                             
 var prevH2Item = null;                                                           
 var prevH2List = null;                                                               
 var index = 0;                                                                   
 $("h2, h3").each(function() {                                                     
        //insert an anchor to jump to, from the TOC link.           
        var anchor = "<a name='" + index + "'></a>";                 
        $(this).before(anchor);                                           
        var li     = "<li><a href='#" + index + "'>" + $(this).text() + "</a></li>";   
        if( $(this).is("h2") ){                                     
            prevH2List = $("<ul></ul>");               
            prevH2Item = $(li);                                     
            prevH2Item.append(prevH2List);                         
            prevH2Item.appendTo("#tocList");                       
        } else {                                                   
            prevH2List.append(li);                                 
        }                                                           
        index++;                                                   
    });                                                               
}
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
Ciao, è un problema piuttosto frequente, si può risolvere in vari modi a seconda della situazione.

Spesso viene risolto con un po' di css, usando scroll-padding-top oppure applicando ai titoli un padding-top positivo e un margin-top negativo, o altre possibili tecniche.

In altri casi è necessario intervenire via javascript/jquery andando ad aggiustare lo scroll della finestra per i casi di link interni.

Vedi se riesci a risolvere con questi pochi consigli.

Se invece ti serve ulteriore aiuto, dovresti postare possibilmente un link alla pagina in questione, perché dal solo codice che hai riportato non è possibile riprodurre il problema e capire come intervenire di preciso.

Fai sapere.
 

Cosina

Utente Attivo
27 Dic 2016
100
0
16
Va bene, cerco di capire quello che mi hai detto e faccio delle prove. Poi vediamo. Grazie
 

Cosina

Utente Attivo
27 Dic 2016
100
0
16
Ciao, seguendo il tuo suggerimento sul padding-top positivo e il margin-top negativo, ho trovato questa soluzione che, nel mio caso, funziona perfettamente e risolve il problema. Grazie mille per i preziosi consigli e buona giornata.

CSS:
a[name]:not([href]) {
    padding-top: 40px;
    margin-top: -40px;
}
a[name]:not([href]):before {
    display: block;
    content: " ";
    padding-top: 40px;
    margin-top: -40px;
    visibility: hidden;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Menu mobile fisso e frequenza di rimbalzo HTML e CSS 4
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
Frank10 Problemino con il menu fisso in fondo pagina ed il solito, explorer HTML e CSS 10
P Come si fa a mettere un menu fisso? HTML e CSS 2
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
M Riadattamento funzioni per far scomparire un menu. jQuery 4
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
U [Javascript] Menu responsive non scompare col click sui link Javascript 0
A [Javascript] Problemi menu bootstrap Javascript 1
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
M [Javascript] far scomparire il menu al click Javascript 0
Kolop [HTML] Menu a colonne stessa lunghezza HTML e CSS 7
felino [WordPress] [QTranslate] Language Switcher Menu WordPress 5
D Sono disperato: Menu select dinamici con Ajax e PHP PHP 1

Discussioni simili