JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div id="body">

  <div id="content-wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>

    <div id="content">
      ini adalah konten yang larilarian
    </div> 

    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>


    <button class="fixi">ini button ngikut aja</button>
  </div>
  
  
  
  </div>
  
  
</div>

CSS

html, body {
  background: purple;
  height:100%;
}

#body {
  background:gray;
  overflow:scroll;
  position:relative;
  display:block;
  height:100%;
}

#content-wrapper {
  text-align:center;
  background:green;
  position:relative;
}

#content-wrapper #content {
  height:500px;
  background:pink;
  width:300px;
  margin:auto;
}

.content {
  width:300px;
  margin:auto;
  background:black;
  margin-bottom:12px;
  height:200px;
}

#content-wrapper button.relati {
  position:relative;
  margin:auto;
}

#content-wrapper button.fixi {
  position:fixed;  
  bottom:0;  
}

JavaScript

$(window).scroll(function(e) {

    var scroller_anchor = $(".scroller_anchor").offset().top;
    
    if ($(this).scrollTop() >= scroller_anchor && $('#topWrapper').css('position') != 'fixed')  
        {
            $('#top_menu').addClass('standardTop');
            $('#top_menu').removeClass('maximumTop');
        }
 
  else if ($(this).scrollTop() < scroller_anchor && $('#topWrapper').css('position') != 'relative') 
      {      
            $('#top_menu').addClass('standardTop');
            $('#top_menu').removeClass('maximumTop');
      }
});