JSFiddle - React, Tailwind, and code Playground

by NabiKAZ

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;" id="temp">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-smart-affix>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

CSS

.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }

  .affix+.container-fluid {
    padding-top: 70px;
  }

  @media (max-width: 900px) {
    #temp {
      height: 300px !important;
    }
  }

  @media (max-width: 500px) {
    #temp {
      height: 100px !important;
    }
  }

JavaScript

$(function() {
    var $attribute = $('[data-smart-affix]');
    $attribute.each(function() {
      $(this).affix({
        offset: {
          top: $(this).offset().top,
        }
      })
    })
    $(window).on("resize", function() {
      $attribute.each(function() {
        $(this).data('bs.affix').options.offset.top = $(this).offset().top
      })
    })
  });