JSFiddle - React, Tailwind, and code Playground

by gnemeth

HTML

<script src="https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js"></script>
    <div id="nav-sticky" style="position: fixed; top: 0px;">
        <ul>
            <li> <a class="scroll-to" href="#sec-1">Sec1</a></li>
            <li> <a class="scroll-to" href="#sec-2">Sec2</a></li>
            <li> <a class="scroll-to" href="#sec-3">Sec3</a></li>
            <li> <a class="scroll-to" href="#sec-4">Sec4</a></li>
        </ul>
    </div>

    <section class="sec-1 section" id="sec-1">
        <div class="head">HEADER</div>
    </section>
    <section class="sec-2 section" id="sec-2">
        <div class="head">HEADER</div>
    </section>
    <section class="sec-3 section" id="sec-3">
        <div class="head">HEADER</div>
    </section>
    <section class="sec-4 section" id="sec-4">
        <div class="head">HEADER</div>
    </section>

CSS

/* Sticky nav */
        
        #nav-sticky ul {
            list-style-type: none;
            width: 940px;
            margin: 0 auto;
        }
        
        @media screen and (max-width: 940px) {
            #nav-sticky ul {
                width: 100%;
            }
        }
        
        #nav-sticky ul li {
            display: inline-block;
        }
        
        #nav-sticky {
            background-color: #ededed;
            height: 55px;
            width: 100%;
            border-bottom: 1px solid #e0e0e0;
            z-index: 100;
            text-transform: uppercase;
        }
        
        #nav-sticky a {
            text-decoration: none;
            height: 55px;
            line-height: 55px;
            display: block;
            color: #000;
            padding: 0 15px;
        }
        
        #nav-sticky a:hover,
        #nav-sticky a.active {
            background-color: #fff;
            color: #e20074;
        }
        
        @media screen and (max-width: 799px) {
            #nav-sticky {
                display: none;
            }
        }
        /* SECTIONS */
        
        .section {
            height: 600px;
        }
        
        .section:nth-child(odd) {
            background: gray;
        }
        
        .head {
            border: 1px solid;
            padding: 20px 0;
            text-align: center;
        }

JavaScript

// Sticky Plugin v1.0.0 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 2/14/2011
// Date: 2/12/2012
// Website: http://labs.anthonygarand.com/sticky
// 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($) {
  var defaults = {
      topSpacing: 0,
      bottomSpacing: 0,
      className: 'is-sticky',
      wrapperClassName: 'sticky-wrapper',
      center: false,
      getWidthFrom: ''
    },
    $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; i < sticked.length; i++) {
        var s = sticked[i],
          elementTop = s.stickyWrapper.offset().top,
          etse = elementTop - s.topSpacing - extra;

        if (scrollTop <= etse) {
          if (s.currentTop !== null) {
            s.stickyElement
              .css('position', '')
              .css('top', '');
            s.stickyElement.parent().removeClass(s.className);
            s.currentTop = null;
          }
        }
        else {
          var newTop = documentHeight - s.stickyElement.outerHeight()
            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
          if (newTop < 0) {
            newTop = newTop + s.topSpacing;
          } else {
            newTop = s.topSpacing;
          }
          if (s.currentTop != newTop) {
            s.stickyElement
              .css('position', 'fixed')
              .css('top', newTop);

            if (typeof s.getWidthFrom !== 'undefined') {
             ...