JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div class="banner">
  HOMEPAGE
  
  <span class="abs">ABSOLUTE</span>
</div>

<nav id="sticker" class="main-nav">
  <a href="#">Link One</a>
  <a href="#">Link Two</a>
  <a href="#">Link Three</a>
</nav>

<div class="scroll">
</div>

SCSS

// position: static
//   Default behavior
// position: relative
//   Relative from position in flow
//   Also used to reset 0,0 point
// position: absolute
//   Absolute position from container 0,0 point
//   Also used to reset 0,0 point
// position: fixed
//   Pull completely out of flow
//   Also used to reset 0,0 point
// z-index: 100;
// 
// overflow: visible
//   Default behavior
// overflow: hidden
//   Clip off past boundaries
// overflow: auto
//   Automatically add scrollbars if overflowing

$body-margin: 2rem;

body {
  background: white;
  margin: $body-margin;
}

.banner {
  background: orange;
  height: 10em;
  
  position: relative;
  z-index: 10;
  
  overflow: hidden;
  
  .abs {
    display: block;
    width: 200px;
    height: 2em;
    background: CadetBlue;
    
    position: absolute;
    bottom: -1em;
    right: 1em;
  }
}

.main-nav {
  background: tomato;
  display: inline-block;
  
  //position: fixed;
  //top: 2em;
  //left: 0;
  //z-index: 5;
  //margin: $body-margin;
  margin: 5em 0;
  width: 150px !important;
  
  a {
    display: block;
    padding: .5em;
    width: 150px;
  }
}

.scroll { height: 1000px; }

JavaScript

// Sticky Plugin v1.0.3 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 02/14/2011
// Date: 07/20/2015
// Website: http://stickyjs.com/
// Description: Makes an element on the page stick on the screen as you scroll
//              It will only set the 'top' and 'position' of your element, you
//              might need to adjust the width in some cases.

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    var slice = Array.prototype.slice; // save ref to original slice()
    var splice = Array.prototype.splice; // save ref to original slice()

  var defaults = {
      topSpacing: 0,
      bottomSpacing: 0,
      className: 'is-sticky',
      wrapperClassName: 'sticky-wrapper',
      center: false,
      getWidthFrom: '',
      widthFromWrapper: true, // works only when .getWidthFrom is empty
      responsiveWidth: false
    },
    $window = $(window),
    $document = $(document),
    sticked = [],
    windowHeight = $window.height(),
    scroller = function() {
      var scrollTop = $window.scrollTop(),
        documentHeight = $document.height(),
        dwh = documentHeight - windowHeight,
        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

      for (var i = 0, l = sticked.length; i < l; i++) {
        var s = sticked[i],
          elementTop = s.stickyWrapper.offset().top,
          etse = elementTop - s.topSpacing - extra;

        //update height in case of dynamic content
        s.stickyWrapper.css('height', s.stickyElement.outerHeight());

        if (scrollTop <= etse) {
     ...