JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="sticky" id="sticky">
  画面に固定し、表示非表示を切り替える
</div>
<div>
  <img src="http://placeimg.com/640/480/any" alt="">
</div>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>
<p>あいうえお</p>

CSS

.sticky {
  background-color: rgba(45,200,120,.8);
  width: 100%;
  bottom: 0;
  position: fixed;
}

JavaScript

var $sticky = $('#sticky');

$(window).on('scroll', function(){
	console.log(this.scrollY);
  
  if( this.scrollY > 200 ) {
  	$sticky.fadeIn();
  } else {
    $sticky.fadeOut();	
  }
})
.trigger('scroll');