Bonjour,
J'espère que vous m'excuserez d'aborder cette question sans doute maintes fois traitée.
Je souhaite créer une page web classique (header, nav, aside, article, footer), dont le barre de navigation <nav> soit toujours visible, c'est-à-dire qu'elle se fixe en haut de la page dès que le scroll vertical risque de la faire disparaître.
J'ai parcouru le web à la recherche d'une solution simple, et n'ai rien trouvé de satisfaisant, sauf dans un topic du forum Alsacréations, Fixer un menu après scroll, où la solution proposée par Zelalsan, une autre façon de faire, m'a séduit par son apparente simplicité, et un comportement de la page exactement tel que je l'attendais !
Hélas, je ne réussis pas à la faire fonctionner (je ne maîtrise pas vraiment JavaScript), et serais heureux que vous m'éclairiez.
Pour présenter la question de façon concise, j'ai intégré la feuille de style et le script dans le code HTML. Je précise que je ne souhaite pas que l'on me présente une autre solution (sauf si, pour fournir le même résultat, elle est encore plus concise), mais qu'on m'explique comment faire fonctionner celle-ci... Je vous en remercie par avance.
Modifié par dylav (14 Dec 2016 - 23:59)
J'espère que vous m'excuserez d'aborder cette question sans doute maintes fois traitée.
Je souhaite créer une page web classique (header, nav, aside, article, footer), dont le barre de navigation <nav> soit toujours visible, c'est-à-dire qu'elle se fixe en haut de la page dès que le scroll vertical risque de la faire disparaître.
J'ai parcouru le web à la recherche d'une solution simple, et n'ai rien trouvé de satisfaisant, sauf dans un topic du forum Alsacréations, Fixer un menu après scroll, où la solution proposée par Zelalsan, une autre façon de faire, m'a séduit par son apparente simplicité, et un comportement de la page exactement tel que je l'attendais !
Hélas, je ne réussis pas à la faire fonctionner (je ne maîtrise pas vraiment JavaScript), et serais heureux que vous m'éclairiez.
Pour présenter la question de façon concise, j'ai intégré la feuille de style et le script dans le code HTML. Je précise que je ne souhaite pas que l'on me présente une autre solution (sauf si, pour fournir le même résultat, elle est encore plus concise), mais qu'on m'explique comment faire fonctionner celle-ci... Je vous en remercie par avance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MenuFixe</title>
<!--
<link rel="stylesheet" href="MenuFixe.css"/>
<script src="MenuFixe.js"></script>
-->
<style>
html, body {height:100%;margin:0;}
#GrandeIntro {height:100%;background:url(MenuFixe.jpg) no-repeat;background-size:cover;}
#siteWrapper {margin-top:-80px;}
#siteWrapper header {height:80px;background:#000;}
#siteWrapper header.fixed {position:fixed;width:100%;top:0;left:0;}
#content {padding:60px 0;background:#0c9;}
#siteWrapper header.fixed+#content {margin-top:80px;}
#content div {width:80%;height:1500px;margin:auto;border:solid;}
</style>
<script>
var header = document.querySelector("#siteWrapper header");
function scrolled(){
var windowHeight = document.body.clientHeight,
currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
header.className = (currentScroll >= windowHeight - header.offsetHeight) ? "fixed" : "";
}
addEventListener("scroll", scrolled, false);
</script>
</head>
<body>
<div id="GrandeIntro"></div>
<div id="siteWrapper">
<header>
<div id="headerTop"></div>
<div id="Grandenavigation">
<nav>
<ul><li>Choix 1</li><li>Choix 2</li></ul>
</nav>
</div>
</header>
<section id="content">
<div></div>
</section>
</div>
</body>
</html>
Modifié par dylav (14 Dec 2016 - 23:59)
