18041 sujets

Questions générales et questions de débutants

[Résolu] Ancre html => autre solution?

Bonjour,

J'ai un petit bug, qui n'en ais pas un sur une page de mon site.

-http://support.spypoint.com/FR/faq.php
Donc j'ai un petit menu en haut de page sur lequel il y a des ancre qui les relis à leur section dédié. Le problème c'est que lorsque je clique sur l'une des section, le titre de section ainsi que la première question se retrouve sous le header qui est en position fixe sur le site...
Ce comportement est normal... mais dans ce cas-ci, pas souhaitable.

Je suis donc à la recherche d'une solution alternative aux ancres html. Des idées???
Bonjour,

Je sais pas si la solution est très propre mais tu peux faire ceci :
section:target {
    padding-top: 150px;
    margin-top: -150px;
}

Modifié par Raphi (12 Jun 2015 - 14:56)
Ooooh! je ne connaissait pas! Comme tu dis, je ne sais pas si c'est propre, mais entouka ça fonctionne!

Merci!
J'avoue que moi non plus je n'avais jamais pensé à cette solution, c'est une recherche Google qui m'a donné la solution. Smiley lol
Raphi a écrit :
Je sais pas si la solution est très propre mais tu peux faire ceci...

@Raphi : Moi je trouve cette solution est très élégantes, et faite pour cela. Je n'y avais pas pensé pour moi-même, je l'adopte !

@juliesunset : attention à ce nouveau paramètre en responsive. En effet, le menu étant minifié sur les petites résolutions, le code ajouté n'a donc plus lieu d'être (ou alors il faut revoir la valeur).
Modifié par Olivier C (14 Jun 2015 - 20:14)
Cette parti du site n'est pas complètement responsive, mais le sera éventuellement. Je prend note de ton commentaire!
Modérateur
Salut,

Désolé mais les solutions proposées ne sont pas terrible (chronophage) :
1. Si on scroll vers le haut, la section a un beau margin. Sur un petit écran, si le header est plus important le décallage sera de même.
2. Demain, tu décides de changer la hauteur du header, il va falloir revoir les paramètres (si on y pense....) de cette/ces page/s. Pour la maintenance, c'est pas terrible.

Je t'invite à regarder ceci : 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        nav ul{list-style: none;}
        nav a{display: block;padding: 5px;}
        a:hover{text-decoration: none;}
        body{margin: 0;padding: 0;font-family: sans-serif ;background: #eee;}
        header{position: fixed;min-height: 100px;background: white;width: 100%;}
        header nav ul{display: flex;}
        
        main{}
        section{min-height: 800px;background: red;}
        #b{background: green;}
        #c{background: blue;}
        
    </style>
    
</head>
<body>
    <main>
        <header>
            <nav>
                <ul>
                    <li><a href="#a">cible A</a></li>
                    <li><a href="#b">cible B</a></li>
                    <li><a href="#c">cible C</a></li>
                </ul>
            </nav>
        </header>
        <div id="global">
            <section id="a"></section>
            <section id="b"></section>
            <section id="c"></section>
        </div>
    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(function(){
            $('a[href^=#]').on('click',function(e){
                var idCible = $(this).attr('href'),
                    hauteurHeader = $('header').outerHeight(), //récupère dynamiquement le décallage 
                    posTopCible = $(idCible).offset().top - hauteurHeader;
                    
                $('html, body').animate({
                    scrollTop : posTopCible+'px'
                });
                
                e.preventDefault();
                
            });
            
            
            
            
            
        });
    </script>
</body>
</html>

Modifié par niuxe (21 Jun 2015 - 22:58)
J'ai jeté un oeil, J'ai dù ajuster 2-3 trucs et revoir une partie de la structure de mon code html pour que ça fonctionne.

Le résultat semble plutôt clean.

Merci pour votre aide!
Sujet clos
Aller à