JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="widget-container"></div>

CSS

body {
    height:1600px;
}
.widget-container {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}

JavaScript

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 600) {
        $('.widget-container').slideDown();
    } else {
        $('.widget-container').slideUp();
    }

});

/*
scrollChk = true;
$(window).scroll(function(){
  var widgetShowValue = $(document).height()/4*1;
  //var widgetShowValue = $('.divName').offset().top
  if( widgetShowValue < $(window).scrollTop() ){
    if( scrollChk ){
      $('.widget-container').slideDown();
      scrollChk = false;
    }

  }
}); */