<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<div class="ad2-bar">
  광고바
</div>
<div class="top2-bar">
  탑바
</div>
.ad2-bar {
  height:100px;
  background-color:red;
}

.top2-bar-fly .top2-bar {
  position:fixed;
  top:0;
}

.top2-bar {
  height:100px;
  background-color:blue;
  position:absolute;
  top:100px;
  left:0;
  width:100%;
}

body {
  margin:0;
  height:10000px;
}
console.clear();
var $html =  $('html');

function TopBar_init() {
  
  var $topBar =  $('.top2-bar');
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if ( scrollTop > 100 ) {
      $html.addClass('top2-bar-fly');
    }
    else {
      $html.removeClass('top2-bar-fly');
    }
  });
}

TopBar_init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.