JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed-element"></div>
<div class='parent-element'>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='second-element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
  <div class='element'></div>
</div>
<script>
let element = document.getElementsByClassName('second-element')[0];
window.scrollTo(0, element.offsetTop -document.getElementsByClassName('fixed-element')[0].offsetHeight)
</script>

CSS

.fixed-element{
  height: 30px;
  width: 100%;
  background-color:black;
  position:fixed;
}

.parent-element {
   width: 100%;
   height: 40000px;
   background-color:blue;
}

.element {
   width: 100%;
   height:100px;
   background-color: yellow;
   margin-top:10px;
}

.second-element{
   width: 100%;
   background-color: red;
   height:200px;
}