JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<div class="content paddingMin">
    <div class="innerContent">
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
    </div>
    <div class="stickyFooter">
        <div class="showingBit"></div>
        <div class="hiddenBit"></div>
    </div>
</div>

CSS

.content {
    width:600px;
    margin:0 auto;
    background:#ccc;
}
.paddingMin {padding-bottom:300px;}
.innerContent {
    background:rgba(255, 255, 255, 0.7);
}
.stickyFooter {
    width:600px;
    position:fixed;
    bottom:-250px;
    background:blue;
}
.showStickyFooter {
    position:inherit;
    bottom:none;
}
.showingBit {
    width:600px;
    height:50px;
    background:rgba(255, 255, 0, 1);
}
.hiddenBit {
    width:600px;
    height:250px;
    background:orange;
}

JavaScript

$(window).scroll(function() {
    var scrollH = $(window).scrollTop(),
        windowH = $(window).height(),
        documentH = $(document).height(),
        hiddenH = $('.hiddenBit').height(),
        sticky = $('.stickyFooter'),
        stickyH = $('.stickyFooter').height(),
        showingH = $('.showingBit').height(),
        desiredH = showingH - stickyH + 'px';
  
  if (sticky.css('bottom') == '0px') {
    sticky.animate({
      bottom: desiredH},
      600
    );
  }
  if ( scrollH < (documentH - windowH - hiddenH) ) {
      $('.stickyFooter').removeClass('showStickyFooter');
      $('.content').addClass('paddingMin');
  } else {
      $('.stickyFooter').addClass('showStickyFooter');
      $('.content').removeClass('paddingMin');
  }
});

$('.showingBit').click(function(){
  var sticky = $('.stickyFooter'),
      stickyH = $('.stickyFooter').height(),
      showingH = $('.showingBit').height(),
      desiredH = showingH - stickyH + 'px';

  if (sticky.css('bottom') == desiredH) {
    sticky.animate({
      bottom:0},
      1200
    );
  }
  if (sticky.css('bottom') == '0px') {
    sticky.animate({
      bottom: desiredH},
      1200
    );
  }
});