JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
      <h1 class="child">Какой то текст</h1>
  </div>
  <button id="btn1">not fixed and back</button>

CSS

body {
      height: 5000px;
      margin: 0;
      font-family: sans-serif;
    }
    .parent {
        position: fixed;
        top: 0;
        left: 0;
        width: 81%;
        padding: 31px;
        background-color: #03121b;
    }
    .child {
        font-size: 18px;
        color: red;
    }
    .parent h1{
      font-size: 18px; !important
        color: red;
    }
    
    #btn1{
      position: absolute;
      bottom: 50%;
    }

JavaScript

let isFixed = false
document.getElementById('btn1').addEventListener('click', e=>{
	isFixed = !isFixed
  document.getElementsByClassName('parent')[0].style.position = isFixed ? 'fixed' : 'relative'

})