JSFiddle - React, Tailwind, and code Playground

by ebiewener

HTML

<div class="bg">
  
<div class="pricetag_container" style="height:80px;margin-top:50px;">
<div class="pricetag" onclick="window.scroll(0,0);" style="padding: 10px 25px 10px 0pt; line-height: 1.4; cursor: pointer; display: block;">
<span style="color:#666; display:block;"> Header</span>
<b>Text TEXT TEXT Text</b>
</div>
</div>
  <div class="button">Button</div>
</div>

CSS

body {height:3000px; font-family:Arial; font-size:15px; margin:0; padding:0;

background-image: linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(138,0,0) 26%, rgb(255,255,255) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.26, rgb(138,0,0)), color-stop(1, rgb(255,255,255)));
}
.button {background:#ccc; border:2px solid #666; padding:4px 230px 50px 5px; display:inline-block; margin-top:-10px;}

.pricetag {

     background-color: white;
     
     bottom: 101px;
     
     display: none;
     
     padding: 5px 25px 5px 0pt;
     
     width: 223px;
     
     margin-top:10px;
   
}

.sroll_pricetag {

     position:fixed;

     background-color: green;
     
     bottom: 101px;
     
     display: none;
     
     padding: 5px 25px 5px 0pt;
     
     width: 223px;
     
     margin-top:70px;
}

JavaScript

$(function(){
    var btn = $('.button');
    var tag = $('.pricetag');
    var btnPosTop = btn.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= btnPosTop){
            //we've reached the button
            btn.css({position:'fixed',top:0,marginTop:0});
            tag.css({position:'fixed',top:0,marginTop:0});
             $('.pricetag').slideDown('slow');
            $('.pricetag_container').css('height', 'auto');
         
          
        }else if(btn.css('position') === 'fixed'){
            //if we scroll back up past the button's original position, and the button had previously been changed to its fixed position, we change it back
            btn.css({position:'',top:'',marginTop:'10px'});
            $('.pricetag').slideUp('slow');
            tag.css({position:'',top:'',marginTop:'10px'});
           
        }
    });
});