JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header fixedsticky">
			<a href="/devis"><span class="palm-hide">Vous avez un projet ?</span>RĂ©alisez votre devis en ligne</a>
		</div>

CSS

html {font-size:62.5%; font-family:Arial;}
body {margin:0; padding:0; height:800px;}
  *, 
   	*:before, 
   	*:after {box-sizing: border-box;}

/* position:sticky */
.fixedsticky {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;}
/* When position: sticky is supported but native behavior is ignored */
.fixedsticky-withoutfixedfixed .fixedsticky-off,
.fixed-supported .fixedsticky-off {position: static;}
.fixedsticky-withoutfixedfixed .fixedsticky-on,
.fixed-supported .fixedsticky-on {position: fixed;}
.fixedsticky-dummy {display: none;}
.fixedsticky-on + .fixedsticky-dummy {display: block;}

.header {top:0; z-index:5; padding:4px; width: 100%; background: #ff7006; color: #FFF; font-size: 16px; font-size: 1.6rem; line-height: 24px; line-height: 2.4rem; text-align: center; transition:all 0.3s ease-out;}


.has-changed {padding:20px; background:tomato; transition:all 0.3s ease-out;}

JavaScript

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        $('.header').addClass('has-changed');
        $('.logo').addClass('has-chand');
        
    }
    else
    {
        $('.header').removeClass('has-changed');
    }
});