JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="test">
  Test
</div>
<p>Aliquam ipsum dui; pulvinar ac nunc a, auctor aliquet nulla. Nullam nec diam et turpis mollis finibus ac in urna! Nulla accumsan neque sed felis maximus, in tempus tortor porta. Phasellus finibus faucibus nulla, ac laoreet ante fringilla id? posuere.
</p>

CSS

* {margin:0; padding:0;}

body {height:2000px; padding-top:75px;}
.test {position: fixed; top:0; left:0; right:0; height:75px; background:tomato; text-align: center; color: white; transition:height 0.3s ease-out;}

.is-sticky {height: 50px;}

JavaScript

function stickyHeader() {
  var scrollTopPosition = $(window).scrollTop();

  if (scrollTopPosition > 0) { // On détecte si l'utilisateur a dépassé le haut de l'écran

    // On ajoute la classe qui permet de modifier l'aspect du header
    $('.test').addClass('is-sticky');

  } else {

    // Une fois que l'utilisateur est retourné en haut de l'écran, on annule le comportement
    $('.test').removeClass('is-sticky');

  }
}
// La fonction stickyHeader est appelée au scroll
$(window).on('scroll', function(e) {
  requestAnimationFrame(function(){
    stickyHeader();
  });
});