JSFiddle - React, Tailwind, and code Playground

[email protected]

by Ryan Brackett

HTML

<div class="wrapper">

  <header>
    <b>I am the header</b>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
  </header>


  <div class="container">

    <div class="featured">
      I am a top featured area.
    </div>
    <div class="main-container">

      <!-- start STICKY CONTAINER -->
      <div class="sticky-container">
        <!-- start STICKY -->
        <div class="sticky">
          <!-- start STICKY INNER -->
          <div class="inner">
            <b>I am the sticky</b>
            <br>
            <br><a href="mailto:[email protected]">Email the code author</a>
            <br>
            <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. sea takimataLorem ipsum dolor sit amet.
            <br>
            <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. sea takimataLorem ipsum dolor sit amet.

          </div>
          <!-- end STICKY INNER -->
        </div>
        <!-- end STICKY -->
      </div>
      <!-- end STICKY CONTAINER -->







      <section class="content-container">
        <div class="inner">
          <h1>I am the content.</h1>



          <p>This sticky plugin will work whether or not the sticky element is shorter or taller </p>

          <p>

            <br> Lorem ipsum dolor sit amet, consetetur sad
            <br> Lorem ipsum dolor sit amet, consetetur sad
            <br> Lorem ipsum dolor sit amet, consetetur sad
            <br> Lorem ipsum dolor sit amet, consetetur sad
            <br> Lorem ipsum dolor sit amet, consetetur sad
            <br> Lorem ipsum dolor sit amet, consetetur sad
          </p>

        </div>
      </section>
      <div class="clearall"></div>
    </div>
  </div>


  <div class="featured">
    I am a bottom featured area.
  </div>


  <footer>
    <b>I am the footer.</b>
    <p>Behold! Lorem ipsum...

CSS

body {
  padding: 5%;
  margin: 0px;
  font-family: Arial;
  font-size: 1.2em;
  line-height: 1.4em;
  background-color: #bfbfbf;
}

body * {
  box-sizing: border-box;
}

header {
  text-align: center;
  padding: 5% 10%;
  background-color: #dcdcdc;
}

footer {
  text-align: center;
  padding: 15%;
  background-color: #252525;
  color: #a9a9a9;
}

.wrapper {
  width: 100%;
  margin: auto;
  background-color: white;
}

.featured {
  background-color: #545454;
  padding: 5%;
  color: #d4d4d4;
  font-weight: bold;
  text-align: center;
}

.container {
  position: relative;
}

.content-container {
  width: 50%;
  float: left;
}

.sticky-container {
  width: 50%;
  float: right;
}

.sticky {
  background-color: #f5462f;
  color: white;
}

.sticky a {
  color: white;
}

.inner {
  padding: 15%;
}

.sticky.fixed {
  position: fixed;
}

.sticky.absolute {
  position: absolute;
}

.clearall {
  clear: both;
}

.responsive .content-container,
.responsive .sticky-container {
  float: none;
  width: 100%;
}

.responsive .content-container .inner,
.responsive .sticky-container .inner {
  padding: 10%;
}

JavaScript

var
  stickyElement = '.sticky',
  stickyContainer = '.sticky-container',
  mainContainer = '.main-container',
  contentContainer = '.content-container',
  footerElement = 'footer';

function theSticky() {

  var
    windowHeight = $(window).outerHeight(),
    documentHeight = $(document).outerHeight(),
    windowScroll = $(window).scrollTop(),
    stickyHeight = $(stickyElement).outerHeight(),
    containerBegins = $(mainContainer).offset().top,
    containerEnds = $(mainContainer).outerHeight(),
    contentHeight = $(contentContainer).outerHeight(),
    footerBegins = $(footerElement).offset().top,
    scrollPercent = (windowScroll) / (documentHeight - windowHeight - containerBegins),
    scrollPercentRounded = Math.round(scrollPercent * 100),
    stickyTopOnScroll = (scrollPercent * (stickyHeight - windowHeight));

  if (!$("html").hasClass("responsive")) {
    if (contentHeight > stickyHeight) {

      if (windowHeight > stickyHeight) { // sticky is shorter than adjacent content
        if (windowScroll > containerBegins) { // When you scroll to the main container
          $(stickyElement).addClass("fixed").removeClass("absolute").css('top', '0').css('bottom', 'auto');
          if (windowScroll > containerBegins + containerEnds - stickyHeight) { // When you reach the bottom
            $(stickyElement).removeClass("fixed").addClass("absolute").css('bottom', '0').css('top', 'auto');
          }
        } else { // Return to normal
          $(stickyElement).removeClass("absolute fixed");
        }
      }
      if (windowHeight < stickyHeight) { // sticky is taller than the window
        if (windowScroll > containerBegins) { // When you scroll to the main container
          $(stickyElement).css('top', '-' + stickyTopOnScroll + 'px').css('bottom', 'auto').addClass("fixed").removeClass("absolute");
        } else { // Return to normal
          $(stickyElement).removeClass("fixed");
        }
        if (windowScroll > containerBegins + containerEnds -...