JSFiddle - React, Tailwind, and code Playground

by johnkoer

HTML

<div class="product-wrapper">
        <div class="buy">Buy</div>
        <div class="product">
            Product 1
            <div class="price">999</div>
        </div>
        <div class="product">
            Product 2
            <div class="price">999</div>
        </div>
        <div class="product">
            Product 3
            <div class="price">999</div>
        </div>
        <div class="product">
            Product 4
            <div class="price">999</div>
        </div>
        <div class="product">
            Product 5
            <div class="price">999</div>
        </div>
        <div class="product">
            Product 6
            <div class="price">999</div>
        </div>
    </div>

CSS

.product-wrapper{
            position:relative;
            width:600px;
        }
        .product{
            width:100%;
            height:500px;
            border:1px dashed purple;
            clear:both;
        }
        
        .price{
            float:right;
            margin:50px 150px 0 0;
            padding:20px;
            background-color:pink;
            width:100px;
        }
        
        .buy{
            position:absolute;
            top:50px;
            right:0px;
            padding:20px;
            background-color:yellow;
        }

JavaScript

$(document).scroll(function () {

var newTop = $('.product').filter(function() {
    return $(this).offset().top >= $(window).scrollTop()
}).first().offset().top;
    
    $(".buy").stop().animate({top: newTop}, 500);
   
});