Menu fisso copre i titoli quando cliccati nel sommario jQuery

[Cosina]

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.

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]

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]

Va bene, cerco di capire quello che mi hai detto e faccio delle prove. Poi vediamo. Grazie

 

[Cosina]

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.

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;
}

 

[WmbertSea]

Bene
Serene festività e buona giornata anche a te.