Bonjour à tous, je réalise actuellement mon site perso.
Le site est construit sur une page et la navigation se fait d'ancre en ancre.
La structure est la suivante :
- un bandeau fixe en haut,
- le bloc de navigation "header" à gauche, en fixe également,
- le contenu central est divisé en section 1,2,3...
Je souhaiterai que le scroll s'arrête au niveau des sections et ne passe pas sous le bandeau fixe du haut.
Il y a sans doute, dans ma construction, quelque chose qui cloche... et que je ne vois plus.
Je suis toute nouvelle sur ce forum, j'espère que j'ai tout bien fait comme il faut.
Merci d'avance pour votre aide.
Ci-dessous le code HTML et en suivant le CSS.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>One page</title>
<link rel="stylesheet" href="onepageStyle.css" media="screen">
</head>
<body>
<div id="bando"></div>
<div id="page">
<div id="header">
<div id="nav">
<ul>
<li><a href="#section1">PRINT</a></li>
<li><a href="#section2">WEB</a></li>
<li><a href="#section3">PHOTO</a></li>
</ul>
</div>
<!--fin #header--></div>
<div id="section1">
<div class="section">
<h2>DIV SECTION 1 - PRINT</h2>
</div>
<!--fin #section1--></div>
<div id="section2">
<div class="section">
<h2>DIV SECTION 2 - WEB</h2>
</div>
<!--fin #section2--></div>
<div id="section3">
<div class="section">
<h2>DIV SECTION 3 - PHOTO</h2>
</div>
<!--fin #section3--></div>
<!--fin #page--></div>
</body></html>et le CSS
@charset "UTF-8";
/* RESET */
html, body {margin: 0;padding: 0;border: 0;font-size: 100%;}
ul {list-style: none;}
a {text-decoration: none;}
/* FIN RESET */
html, body {
height: 100%;
width: 100%;
}
body {font-family : Arial, sans-serif;}
#bando {
width: 100%;
position: fixed;
height: 80px;
background:#000;
z-index: 10;
top: 0;
}
#page {
width: 100%;
height: 100%;
position:relative;
top: 10%;
}
#header {
width: 300px;
height: 100%;
position: fixed;
left: 0;
top: auto;
z-index: 1;
background-color: brown;
}
#nav {
padding: 20px 10px;
background-color: pink;
}
#nav ul li a {
color: #FFF;
font-size: 2.2em;
}
.section {
margin-left: 35%;
height: 300px;
}
h2 {
font-size: 3em;
color: #FC3;
}
#section1 {
background-color: red;
}
#section2 {
background-color: purple;
}
#section3 {
background-color: green;
}
4 réponses
Merci beaucoup Nairolf, c'est super sympa tu m'as dépannée.
Cela fonctionne maintenant.
Bonne fin de journée.
Salut morea !
Le problème vient de la position fixed de ton bando qui fait 80px de hauteur et cache le haut de tes bandos.
Rajoute un margin-top:80px à toutes tes sections et le tour est joué ;)
salut pierrot, et merci d'avoir regardé mon problème, malheureusement cela ne marche pas, j'avais déjà tenté le coup.
J'ai mis cette page sur le serveur ce matin, regarde directement en ligne c'est mieux il me semble pour se rendre compte.
www.comorea.com
Le problème vient plutôt de ta fonction jQuery qui permet de scroller. Car ta fonction permet de mettre le haut de ta div, en haut de la page, ce qui fait que ça se retrouve derrière le bandeau.
Je te conseille de modifier cette ligne:
$('html,body').animate({scrollTop: height}, 1000);Par ça:
var header = $('#bando').height(); (ou $('#header').height() si c'est en responsive)
$('html,body').animate({scrollTop: height-header}, 1000);Là tu vas obtenir ce que tu veux (à quelques pixels prêt mais tu peux arranger)