28172 sujets

CSS et mise en forme, CSS3

[Résolu] Go to div #div avec menu fixed

Bonsoir,

Je suis actuellement entrain de développer un site de gestion d'annonces immobilières et je rencontre un petit soucis. J'ai des liens qui envoie vers une div particulière avec des simples balises <a> pointant vers un id #div.

Cependant, je dispose d'un menu du haut fixe et l'alignement se fait avec le haut de la page et une partie de la div concernée est cachée par le menu.

J'avais pensé le corriger avec un petit bout de JS en faisit un goTo(divPosition - menuHeight) mais il se trouve que je peux vouloir accéder à cette div depuis une autre page.

Est-ce que vous avez déjà rencontré ce genre de problème ?

D'avance merci.
Modifié par Schnapse (19 Dec 2014 - 14:54)
Bonsoir,
La fonction javascript window.location.hash; permet de récupérer l'ancre de la page. Ce qui peut se faire au moment du chargement.
Modérateur
Bonjour,

On peut s'en sortir avec uniquement du css, mais bon, c'est à peine moral (et ça dépend pas mal du reste de ton css). En voici un exemple à adapter en fonction du reste de ton code :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body, nav {margin:0;padding:0;}
.menu {height:50px;width:100%;margin:0;padding:0;position:fixed;top:0;background:orange;z-index:1;}
.menu ul, .menu li {margin:0;padding:0;}
.menu li {display:inline-block;}
.conteneur {position:relative;margin-top:50px;}
.a {height:200px;padding-top:50px;position:relative;top:-50px;}
.a h2 {background:green;color:#fff;}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#a1">a1</a></li>
<li><a href="#a2">a2</a></li>
<li><a href="#a3">a3</a></li>
<li><a href="#a4">a4</a></li>
<li><a href="#a5">a5</a></li>
<li><a href="#a6">a6</a></li>
<li><a href="#a7">a7</a></li>
<li><a href="#a8">a8</a></li>
<li><a href="#a9">a9</a></li>
</ul>
</nav>
<div class="conteneur">
<div class="a" id="a1">
<h2>a1</h2>
Toto va à la plage.
</div>
<div class="a" id="a2">
<h2>a2</h2>
Maman, je n'ai rien aux dents.
</div>
<div class="a" id="a3">
<h2>a3</h2>
C'est toi le lion.
</div>
<div class="a" id="a4">
<h2>a4</h2>
Toto va à la plage.
</div>
<div class="a" id="a5">
<h2>a5</h2>
Maman, je n'ai rien aux dents.
</div>
<div class="a" id="a6">
<h2>a6</h2>
C'est toi le lion.
</div>
<div class="a" id="a7">
<h2>a7</h2>
Toto va à la plage.
</div>
<div class="a" id="a8">
<h2>a8</h2>
Maman, je n'ai rien aux dents.
</div>
<div class="a" id="a9">
<h2>a9</h2>
C'est toi le lion.
</div>
</div>
</body>
</html>


Amicalement,
Modifié par parsimonhi (19 Dec 2014 - 14:05)
Je me suis servis de la réponse de @benj avec le contenu de la variable window.location.hash. Si celle-ci est non vide, je me repositionne en haut de la page puis je fais un scrollTop:animate qui descends jusqu'à ma div concernée avec une marge de sécurité et cela fonctionne parfaitement.
Sujet clos
Aller à