Dynamic Repeating Sticky Menu

by septembrr

HTML

<body>
  <header>
    <p>NAVIGATION MENU</p>
  </header>
  <div class="site-inner">
    <h1>Page Title</h1>
    <h2>Introduction</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor lacus, ornare sed hendrerit vel, dictum in quam. In at sollicitudin ante. Nulla in mi ex. Pellentesque finibus quis lectus eu luctus.</p>

    <div id="content-section" class="list-4">
      <div class="content-wrapper">
        <h3>Item Section Title 1</h3>
        <div class="item-1 sticky-nav">
          <div class="item-wrapper">
            <div class="item-content">
              <p>Item 1: This item is pretty fabulous!</p>
              <button>Buy Now!</button>
            </div>
          </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor lacus, ornare sed hendrerit vel, dictum in quam. In at sollicitudin ante.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor lacus, ornare sed hendrerit vel, dictum in quam. In at sollicitudin ante.</p>
      </div>
      
      <div class="content-wrapper">
        <h3>Item Section Title 2</h3>
        <div class="item-2 sticky-nav">
          <div class="item-wrapper">
            <div class="item-content">
              <p>Item 2: This item is pretty expensive!</p>
              <button>Buy Now!</button>
            </div>
          </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor lacus, ornare sed hendrerit vel, dictum in quam. In at sollicitudin ante.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor lacus, ornare sed hendrerit vel, dictum in quam. In at sollicitudin ante.</p>
      </div>
      
      <div class="content-wrapper">
        <h3>Item Section Title 3</h3>
        <div class="item-3 sticky-nav">
          <div class="item-wrapper">
            <div class="item-content">
              <p>Item 3: This...

CSS

body {
  font-family: 'Arial', sans-serif;
}

header {
  background: #536182;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 50px;
  text-align: center;
  color: #fff;
}

.site-inner {
  margin-top: 50px;
  padding: 20px 0px;
}

.content-wrapper {
  margin-bottom: 30px;
  background: #e8e8e8;
  padding: 20px;
}

.persistentHeader .item-wrapper {
	position: fixed;
	z-index: 999;
	left: 0px;
  width: 100%;
}

.item-wrapper {
  background: #7f6f8f;
}

.item-content {
  display: flex;
  padding: 10px;
  align-items: center;
  max-width: calc(100vw - 96px);
  margin: 0 auto;
}

.item-content p {
  flex: 1 1 auto;
  margin: 0px;
  color: #fff;
}

.item-content button {
  height: 30px;
  background: #fff;
  text-transform: uppercase;
  padding: 5px 10px;
  border: none;
}

JavaScript

// Dynamically make items sticky as you scroll
jQuery( document ).ready(function() {

  // Get number of items
  var class_name = jQuery('#content-section').attr('class');
  class_name = class_name.replace( 'list-', '' );
  var intNum = parseInt(class_name);

  // Get height of header
  var headerHeight = jQuery('header').outerHeight();
  
  // Create array of distances items are offset from top
  var scrollDistance = [];

  // Create array of classes to check
  var element = [];
  for( i = 0; i < intNum; ++i) {
  	element.push("item-" + (i+1));
  }
  
  jQuery(window).scroll(function (event) {
  
  	// Set distance from top of window
    var topOfWindow = jQuery(window).scrollTop();

    // Set distance to end text section
    var endText = jQuery('#endtext').offset().top;

    // Check each sticky header every time you scroll
    for( i = 0; i < intNum; ++i) {
      scrollDistance.push( jQuery("." + element[i] ).offset().top );

      // If inside section following sticky items section, remove all sticky headers
      if ( topOfWindow > endText ) {
        jQuery( "." + element[i] ).removeClass("persistentHeader");
        jQuery( "." + element[i] ).css('min-height', jQuery( "." + element[i] ).outerHeight() );
        jQuery( "." + element[i] + '> .item-wrapper' ).css('top', 'auto' );
      }

      // If within items section, make that item sticky
      else if (scrollDistance[i] <= (topOfWindow + headerHeight)) {
        jQuery( "." + element[i] ).addClass("persistentHeader");
        jQuery( "." + element[i] ).css('min-height', jQuery( "." + element[i] ).outerHeight() );
        jQuery( "." + element[i] + '> .item-wrapper' ).css('top', headerHeight + 'px' );
      }

      // Remove classes when conditions not met
      else {
        jQuery( "." + element[i] ).removeClass("persistentHeader");
        jQuery( "." + element[i] ).css('min-height', jQuery( "." + element[i] ).outerHeight() );
        jQuery( "." + element[i] + '> .item-wrapper' ).css('top',...