header scroll fixed

by hohoya33

HTML

<nav class="navbar navbar-expand-lg navbar-light fixed-top is-fixed" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="/">SOCAR Tech Blog</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      Menu
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">🏠 Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/posts">✏️ Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/categories">📔 Categories</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/tags">🏷 Tags</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/authors">✍🏻 Authors</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

body {
  font-size: 20px;
  color: #212529;
  line-height: 1.8; }

p {
  line-height: 1.8;
  margin: 30px 0; }
  p a {
    text-decoration: underline black; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800; }

a {
  color: #212529;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
  a:focus, a:hover {
    color: #0085A1; }

blockquote {
  font-style: italic;
  color: #868e96; }

.section-heading {
  font-size: 36px;
  font-weight: 700;
  margin-top: 60px; }

.caption {
  font-size: 14px;
  font-style: italic;
  display: block;
  margin: 0;
  padding: 10px;
  text-align: center;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px; }

::-moz-selection {
  color: #fff;
  background: #0085A1;
  text-shadow: none; }

::selection {
  color: #fff;
  background: #0085A1;
  text-shadow: none; }

img::selection {
  color: #fff;
  background: transparent; }

img::-moz-selection {
  color: #fff;
  background: transparent; }

#mainNav {
  position: absolute;
  border-bottom: 1px solid #e9ecef;
  background-color: white;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  #mainNav .navbar-brand {
    font-weight: 800;
    color: #343a40; }
  #mainNav .navbar-toggler {
    font-size: 12px;
    font-weight: 800;
    padding: 13px;
    text-transform: uppercase;
    color: #343a40; }
  #mainNav .navbar-nav > li.nav-item > a {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase; }
  @media only screen and (min-width: 992px) {
    #mainNav {
      border-bottom: 1px solid transparent;
      background: transparent; }
      #mainNav .navbar-brand {
        padding: 10px 20px;
        color: #fff; }
        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
          color: rgba(255, 255, 255, 0.8); }
      #mainNav .navbar-nav > li.nav-item > a {
        padding: 10px 20px;
        color: #fff; }
        #mainNav .navbar-nav > li.nav-item > a:focus,...

JavaScript

/*!
 * Start Bootstrap - Clean Blog v5.0.7 (https://startbootstrap.com/template-overviews/clean-blog)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-clean-blog/blob/master/LICENSE)
 */

!function(o) {
    "use strict";
    o("body").on("input propertychange", ".floating-label-form-group", function(i) {
        o(this).toggleClass("floating-label-form-group-with-value", !!o(i.target).val())
    }).on("focus", ".floating-label-form-group", function() {
        o(this).addClass("floating-label-form-group-with-focus")
    }).on("blur", ".floating-label-form-group", function() {
        o(this).removeClass("floating-label-form-group-with-focus")
    });
    if (992 < o(window).width()) {
        var s = o("#mainNav").height();
        o(window).on("scroll", {
            previousTop: 0
        }, function() {
            var i = o(window).scrollTop();
            i < this.previousTop ? 0 < i && o("#mainNav").hasClass("is-fixed") ? o("#mainNav").addClass("is-visible") : o("#mainNav").removeClass("is-visible is-fixed") : i > this.previousTop && (o("#mainNav").removeClass("is-visible"),
            s < i && !o("#mainNav").hasClass("is-fixed") && o("#mainNav").addClass("is-fixed")),
            this.previousTop = i
        })
    }
}(jQuery);