<header>Entete</header>
<nav> <img src="https://tutovisuel.com/animals-q-c-200-150-8.jpg" alt="" />Menu</nav>
<div> lorem</div>
<div> contenu 3</div>
<div> contenu 4</div>
<div> contenu 5</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;
  font-family: verdana;
  background-color: rgb(236,240,241);
}
p{
  margin: 1em 0;
}
header{
  height: 100px;
  line-height: 100px;
  width: 100%;
  color: white;
  background-color: rgb(63,70,76);
  text-transform: uppercase;
  text-align: center;
}
nav{
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: rgb(282,97,1);
  text-transform: uppercase;
  text-align: center;
  position: relative;
  color: white;
}
nav img{
  position: absolute;
  height: 50px;
  left: 30px;
  top: 0 ;
  border-radius: 20px;
  transition : all 1s ease;
}
div{
  height: 200px;
  width: 80%;
  margin: 0 auto;
  background-color: rgb(152,131,96);
  color: white;
  padding: 10px;
}

(function() {
  //cibler les élements html
  var tabNav = document.querySelectorAll("nav");
  var tabImg = document.querySelectorAll("nav img");
  // j'enregistre la position top de nav
  var memoNav = tabNav[0].offsetTop;
  // --- action
  function effet1(){
    // position du curseur au scroll
    var posCurseur = this.pageYOffset;
    // je teste la différence de distance entre scroll et nav
    if(memoNav-posCurseur<1){
      tabNav[0].style.position = "fixed";
      tabNav[0].style.top = 0;
      tabNav[0].style.zIndex = 999;
      tabImg[0].style.height = '100px';
    }
    if(posCurseur<101){
      tabNav[0].style.position = "relative";
      tabImg[0].style.height = '50px';
    }
  }
  // evenement
  window.addEventListener("scroll", effet1);
}).call(this);
Rerun