JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="addToCart"> Add To Cart </div>
    <div> This is where we do work. </div>
    <div class="price"> $10.00 </div>
    <div class="price"> $20.00 </div>
    <div class="price"> $5.00 </div>
    <div class="price"> $15.00 </div>
    <div class="spacer"></div>
</div>

CSS

#container{
  position:relative;   
}
.price{
  margin-top:150px;
  height:20px;
  width:50px;
  padding:2px 5px;
  border-radius:5px;
  border:1px solid #bbb;    
}
#addToCart{
  position:absolute; 
  top:0;
  left:0;    
}
.spacer{
  height:3000px;   
}

JavaScript

$('#addToCart').css('left', $('#addToCart').width());

//log each x,y coordniate into an array
var theCoords = [];
$.each($('.price'), function(i,obj){
  theCoords.push({
      'ele' : $(obj), 
      'top' : $(obj).offset().top, 
      'left' : $(obj).offset().left}); 
});
$(window).on('scroll', function(){
  $.each(theCoords, function(i, arr){
    if($(window).scrollTop() > arr.top - 75){
      $('#addToCart').css({
            'top': arr.top
      });
      $('#addToCart').prop('rel', arr.ele);
    }
  });  
});
$('#addToCart').click(function(){
   console.log($($(this).prop('rel')).text()); 
});