JSFiddle - React, Tailwind, and code Playground

HTML

<div id="iWrap">
  <div id="header">
    header
    <div id="gnb">nav</div>
    <!-- // #gnb -->
  </div>
  <!-- // #header -->
  
  <div id="container">
    희희희
  </div>
  
</div>
<!-- // #iWrap -->

CSS

#iWrap{position:relative}
#header{position:relative;height:100px;background:red}
#gnb{position:absolute;left:0;top:50px;width:100%;height:49px;background:blue}
#gnb.fixed{position:fixed;left:0;top:0}
#container{height:600px;background:#ccc};

JavaScript

// 브라우저 스크롤 fixed 예제
$(window).scroll(function(){
  // window(브라우저창)의 스크롤 위치
  var scrollPos = $(window).scrollTop();
  // #gnb 엘리먼트
  var $gnbEl = $('#gnb');
  // #header 엘리먼트
  var $headerEl = $('#header');
  // #gnb를 고정시킬 지점
  var fixedPos = $headerEl.height() / 2;
  
  // window의 scroll값이 fixedPos(고정지점)을 비교
  if (scrollPos >= fixedPos) {
    // 크거나 같으면 #gnb가 고정되도록 class 추가
    $gnbEl.addClass('fixed');
  }else{
    // 그렇지 않다면 #gnb가 고정되지 않도록 class 제거
    $gnbEl.removeClass('fixed');
  }
});