JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="main fixed">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider fixed">
    This is the footer
  </div>
</div>
<div class="footer">This is the main footer</div>

CSS

/* resets */

body {
  margin: 0px;
  padding: 0px;
}

.main.fixed > .slider {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.main.fixed ~ .footer {
  margin-top: 60px;
}

.slider {
  background: #006264;
  color: white;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

.placeholder {
  padding: 100px 0;
}

JavaScript

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $('.footer').offset().top) {
    $('.main').removeClass('fixed');
  } else {
    $('.main').addClass('fixed');
  }
});

$(window).scroll();

/*window.addEventListener('scroll', e => {
	var $footer = document.querySelector(".footer");
  var $slider = document.querySelector(".main");
  
  console.log($footer.getBoundingClientRect().top);

	if(window.pageYOffset + window.innerHeight <= $footer.offsetTop) {
  	$slider.classList.add("fixed");
    //$footer.style.marginTop = 0;
  } else {
  	$slider.classList.remove("fixed");
    //$footer.style.marginTop = $slider.offsetHeight;
  }
});*/