JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<script src="jquery-1.12.4.min.js"></script>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<body>
  <div class="container-fluid">
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="/en">3D 2D Geometry</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">
            <li><a href="/en/affiliates">Affiliates</a></li>
            <li><a target="_blank" href="http://eepurl.com/cGns7X">Join Mailing List</a></li>
            <li><a href="/en">English</a></li>
            <li><a href="/fr">French</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/en">Home</a></li>
            <li><a href="/en/store#books">Books</a></li>
            <li><a href="/en/store#tesserart">tesserART</a></li>
            <li><a href="/en/store">Store</a></li>
            <li><a href="/en/geometry">Geometry</a></li>
            <li><a href="/en#vision">Vision/Mission/Values</a></li>
            <li><a href="/en/contact">Contact</a></li>
            <li><a href="/en/terms">Terms</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="anchor">
      <a...

SCSS

header {
  .row {
    .row-col-img-padding {
      [class*="col-"] {
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
    }
  }
}

#heading-text {
  z-index: 1000;
}

.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
  padding: 100px 0 50px;
  color: yellow;
}

.intro-header .site-heading,
.intro-header .page-heading {
  text-align: center;
}

.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 200%;
  font-family: Copperplate, serif;
}

.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  font-size: 120%;
  line-height: 1.5;
  display: block;
  font-family: Copperplate, sans-serif;
  font-weight: 300;
  margin: 10px 0 0;
}

.intro-header a {
  color: white;
  border-bottom: 1px solid #ccc;
}

.intro-header a:hover {
  text-decoration: none;
}

.intro-header .post-heading h1 {
  font-size: 175%;
}

.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
  line-height: 1.1;
  display: block;
}

.intro-header .post-heading .subheading {
  font-family: Copperplate, sans-serif;
  font-size: 120%;
  margin: 10px 0 30px;
  font-weight: 600;
}

.intro-header .post-heading .meta {
  font-family: Copperplate, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 100%;
}

.intro-header .post-heading .meta a {
  color: yellow;
}

.navbar-custom {
  -webkit-transition: background-color 0.3s;
  -khtml-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  -ms-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translate3d(0, 0, 0);
  -khtml-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 ...

JavaScript

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
    var MQL = 1170;

    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
        var headerHeight = $('.navbar-custom').height();
        $(window).on('scroll', {
                previousTop: 0
            },
            function() {
                var currentTop = $(window).scrollTop();
                //check if user is scrolling up
                if (currentTop < this.previousTop) {
                    //if scrolling up...
                    if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
                        $('.navbar-custom').addClass('is-visible');
                    } else {
                        $('.navbar-custom').removeClass('is-visible is-fixed');
                    }
                } else {
                    //if scrolling down...
                    $('.navbar-custom').removeClass('is-visible');
                    if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                }
                this.previousTop = currentTop;
            });
    }
});