<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.