<header>Entete</header>
<nav> Menu</nav>
<div> contenu 2</div>
<div> contenu 3</div>
<div> contenu 4</div>
<div> contenu 5</div>
<div class="invisible"> contenu 6</div>
<div> contenu 7</div>
<div> contenu 8</div>
<div> contenu 9</div>
<div> contenu 10</div>
<div> contenu 11</div>
<div> contenu 12</div>
<div> contenu 13</div>
<div> contenu 14</div>
<div> contenu 15</div>
body{
position: relative;
}
header{
height: 100px;
line-height: 100px;
width: 100%;
background-color: pink;
text-transform: uppercase;
text-align: center;
}
nav{
height: 50px;
line-height: 50px;
border: solid silver;
width: 100%;
background-color: orange;
text-transform: uppercase;
text-align: center;
}
div{
height: 200px;
border: solid silver;
width: 80%;
margin: 0 auto;
background-color: rgb(240,230,230);
}
.invisible{
position: relative;
z-index: 1; /* profondeur */
left: 300px;
opacity: 0;
transition : all 1s ease;
}
//cibler les élements html
var tabInvisible = document.querySelectorAll(".invisible");
var tabNav = document.querySelectorAll("nav");
// j'enregistre la position top du premier element avec la class 'invisible'
var memoPos = tabInvisible[0].offsetTop;
// j'enregistre la position top du premier nav
var memoNav = tabNav[0].offsetTop;
// --- action
function effet1(){
// position du curseur scroll
var posCurseur = this.pageYOffset;
// je teste la différence de distance
if(memoPos-posCurseur<400){
tabInvisible[0].style.opacity = 1;
tabInvisible[0].style.left = 0;
}
if(memoNav-posCurseur<1){
tabNav[0].style.position = "fixed";
tabNav[0].style.top = 0;
tabNav[0].style.zIndex = 999;
}
if(posCurseur<101){
tabNav[0].style.position = "static";
}
}
// evenement
window.addEventListener("scroll", effet1);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.