JSFiddle - React, Tailwind, and code Playground

by Tistklehoff

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div>
<div class="canstick image1">
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>  
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>  
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>  
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>  
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>  
</div>
<div>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in quonsequitor capabitur 
  </p>
  <p>
  Lorem ipsum sit amen in...

CSS

.image1 { height: 100px; width: 100px; display: block; border: 1px solid red; position:relative; }
.canstick.sticked { position: fixed; left: 100px; top: 100px; }

JavaScript

jQuery(function($){

	var $myStick = $(".canstick");
  
	$(window).on("scroll", function(evt){
  	console.log("scroll " + $(this).scrollTop());
    console.log($allSticks);
  	var scrollData = $(this).scrollTop();
  	if (scrollData > 100 && !$allSticks.hasClass("sticked")) {
    	$myStick.addClass("sticked");
    }
    else {
      if (scrollData <= 100 && $allSticks.hasClass("sticked")) {
        $myStick.removeClass("sticked");
      }
    }
  });
})