JSFiddle - React, Tailwind, and code Playground

by gabs00

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">
  <nav class="navbar navbar-default no-border">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Page-A</a></li>
          <li><a href="#">Page-B</a></li>
          <li><a href="#">Page-C</a></li>
          <li><a href="#">Page-D</a></li>
          <li><a href="#">Page-E</a></li>
          <li><a href="#">Page-F</a></li>
          <li><a href="#">Page-G</a></li>
          <li><a href="#">Page-H</a></li>
          <li><a href="#">Page-I</a></li>
          <li><a href="#">Page-J</a></li>

        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div className="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod turpis tincidunt, rutrum dolor vitae, pharetra quam. Morbi dui metus, posuere non lacus egestas, molestie porttitor nunc. Donec egestas vel nibh sed feugiat. Praesent bibendum imperdiet velit eu laoreet. Aenean leo odio, facilisis a ullamcorper et, placerat a turpis....

CSS

.content {
      position: relative;
      height: 800px;
    }

    .sticky {
     position: fixed;
     left: 0;
     right: 0;
    }
    
    .no-border {
      background-color: transparent;
      border: none
    }

JavaScript

$(function(){
      var $nav = $('nav');
      $(window).on('scroll', function(e){
        if(this.scrollY >= 50 && !$nav.hasClass('sticky')){
        	$nav.removeClass('no-border');
          $nav.addClass('sticky');
        } else if(this.scrollY < 50 && $nav.hasClass('sticky')){
          $nav.removeClass('sticky');
          $nav.addClass('no-border')
        }
      });
    });