JSFiddle - React, Tailwind, and code Playground

by merindema

HTML

<body>
	<header id="head_21">
		<div class="container">
			<div class="col-lg-12">
				<ul class="d-flex justify-content-end">
					<li class="inline_21"><a href="#">Home</a></li>
					<li class="inline_21"><a href="#">about</a></li>
					<li class="inline_21"><a href="#">contact</a></li>
					<li class="inline_21"><a href="#">sksks</a></li>
					<li class="inline_21"><a href="#">Home</a></li>
				</ul>
			</div>
		</div>
	</header>
	<div id="scroller">
		<div class="container">
			<div class="col-lg-12">		
				<h2>Scroller</h2>
				<div class="col-lg-8 d-flex">1</div>
        <div class="col-lg-8 d-flex intro">2</div>
        <div class="col-lg-8 d-flex">3</div>
        <div class="col-lg-8 d-flex">4</div>
        <div class="col-lg-8 d-flex">5</div>
			</div>
		</div>
	</div>		
</body>

CSS

#scroller img{
  width: 100%;
}
#scroller .col-lg-8{
  margin-bottom: 40px;
  width:250px;
  height:400px;
}
#head_21{
  padding-top: 20px;
  padding-bottom: 20px;
  background: yellow;
  width: 100%;
}
.inline_21{
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
  border: 2px solid black;
  padding: 3px 10px;
  cursor: pointer;
}
.inline_21:hover{
  background-color: #fff;
  color: black;
  transition: 0.5s;
}
#head_21 a:hover{
  color: black;
}

JavaScript

window.onscroll = function() {
    var intro = document.querySelector('.intro').offsetTop; 
    var fixed = document.getElementById('head_21');
    var scrolled = window.pageYOffset;
    if(scrolled > intro) {  // если доходит до второй картинки
        fixed.style = 'position: fixed'; 
        fixed.style.backgroundColor = 'violet';
        // fixed.style.marginTop = '-15px';
    } 
    else {  // когда возрващается
        fixed.style = 'display: block';
    }
}