[Résolu] Barre de navigation fixée : comment décaler les ancres

Bonjour,

Tout est dans le titre....
C'est pour mon portfolio (BTS)
Dans mon site, j'ai un endroit où je liste les TP que j'ai fait, avec une id qui renvoie directement sur le TP en question.

Problème : j'ai une barre de navigation fixe, du coup elle masque le haut de ma "boîte à TP"

<div class="col-sm-4">
                        <div class='lang_'>
                            <div class="titre">
                                <img src='images/logo blanc/logo_c.png' alt="logo c# blanc">
                                <p>C#<span class="glyphicon glyphicon-chevron-down"></span></p>                                
                            </div>
                            <div class="corps">                               
                                <ul>
                                    <li class="head_skills">Avec Visual Studio : </li>
                                    <li><a href="#dvd">Gestion Dvd</a></li>
                                    <li><a href="#contacts">Gestion des contacts</a></li>
                                    <li><a href="#pendu">Jeu de Pendu</a></li>
                                    <li><a href="#mastermind">Mastermind</a></li>
                                    <li><a href="#morpion">Morpion</a></li>                               
                                </ul>                           
                            </div>
                        </div>
                    </div>

J'obtiens ce résultat :

Alors que je voudrai obtenir ceci :

Pouvez vous m'aider ?

D'avance merci

Bonjour,

Sur votre bloc qui comprend les TP, il suffit de mettre un margin-top de la hauteur de la navigation.
Vu que votre navigation est fixée, elle n'a plus de consistance, d'où le bug

Bien à vous

Alors le résultat est ... bof. En faisant ça, ça me "descend" le tp sur lequel j'ai cliqué, ce qui fait bizarre :

Vu que les autres ne bougent pas.

Des fois, c'est compliqué de corriger un tout petit truc qui cloche

Edit : non je raconte des bêtises.
Mettre une margin-top à mon bloc TP ça change rien du tout. Enfin y a plus d'espace entre les blocs, mais c'est tout.
Ce qui fait l'affichage du TP un peu décalé (qui permet de voir le titre certes, mais c'est moche), c'est une margin dans .tp:target
Modifié par Thia (12 May 2020 - 08:58)

Oulà il est un peu gros mon code y a du JQuery en +

J'ai essayé, c'est impossible de le mettre en totalité ici, c'est trop long.
J'ai mis tout ça (j'ai essayé d'anonymiser mon truc.....) là-dessus :
https://www.transfernow.net/IFDQx0052020

Normalement y a le html, le css et le jquery. J'ai pas mis le php, il ne sert que pour le formulaire de contact.

Le soucis se situe dans le js.
Le fait de mettre ceci

function(){window.location.hash = hash;}

casse l'animation car il fait un refresh de la page

avec ceci, ça fonctionne normalement

$(".navbar a, footer a").on("click", function(event){
    
        event.preventDefault();
        var hash = this.hash;
		 
		 const top = $(hash).offset().top - $('.navbar').height();
        
        $('body,html').animate({scrollTop: top} );
        
    }),

Modifié par Gus (12 May 2020 - 11:25)

Je viens d'essayer, ça ne fonctionne pas chez moi.

Mais j'ai trouvé une solution (qui vaut....ce qu'elle vaut)

J'ai rajouté une div avant ma div .tp

<div class="col-sm-4">
                       [b] <div class="anchor" id="pendu"></div>[/b]
                        <div class="tp">                                                   
                            <div class="titre">
                                <h2>Pendu</h2>
                                <div class="mauve-divider"></div>
                                <br>
                                <div class="logos">
                                    <img src="images/logo_visual.png" alt="image logo Visual Studio"> 
                                    <img src="images/logo_c.png" alt="image logo C#">
                                </div>
                                <div class="mauve-divider"></div>
                                <br>
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </div>
                            <div class="corps">
                                <p>TP : Le célèbre jeu de Pendu, développé avec une petite application graphique</p>
                                <img src="images/captures/Capture_pendu.png" alt="copie écran appli jeu de pendu">
                                <br> <br>
                                <a href="docs/synthese_Pendu.pdf" target="_blank">Fiche de Synthèse</a>                                
                            </div>
                        </div>
                    </div>

et j'ai donc mis l'id dans cette div vide.
Et en css :

.anchor {
    height: 35px;
    background: #b01973;    
}

J'ai supprimé mon margin-bottom de .tp (il servait plus à rien du coup)
et c'est tout en fait. Du coup mon ancre est + haut, et quand je clique j'arrive tout pile sur mon titre

Edit : c'est un peu du bidouillage, mais ça marche c'est le principal

Merci en tout cas pour ton aide Gus
Modifié par Thia (12 May 2020 - 12:01)