Header + Topbar - Comp. Interago

by francisco_negrao

HTML

<link rel="stylesheet" href="https://componentes.interago.com.br/bootstrap-grid.css">
<link rel="stylesheet" href="https://componentes.interago.com.br/global-css.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css">
<header id="js-header">
  <div class="topbar" id="js-topbar">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a
            href="#link-google-maps"
            target="_blank"
            title="Venha visitar nosso local físico - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fas fa-map-marker-alt"></i> Av. Trocar, n° 999, Cidade Trocar
          </a>
          <a
            href="https://web.whatsapp.com/send?phone=5517999999999"
            target="_blank"
            title="Falar no WhatsApp - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
             <i class="fab fa-whatsapp"></i> +55 (88) 99911-0253
          </a>
          <!-- REDES SOCIAIS, DESCOMENTAR PARA HAB. -->
          <!--<a
            href="#"
            target="_blank"
            title="Ir para Perfil do Instagram - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-instagram" aria-hidden="true"></i>
          </a>
          <a
            href="#"
            target="_blank"
            title="Ir para a Página do Facebook - NOME EMPRESA"
            rel="noopener noreferrer nofollow"
          >
            <i class="fab fa-facebook-square" aria-hidden="true"></i>
          </a>-->
          <a
            href="contato"
            title="Ir para Página de Contato"
            rel="noopener noreferrer nofollow"
            class="btn btn-topbar"
            >ENTRAR EM CONTATO</a
          >
        </div>
        <!--12-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--topbar-->
  <div class="container">
    <div...

CSS

body {
  height: 3000px;
}

/* NAVBAR  */
/* PASSO 01. Estilo Barra de Navegação Responsiva */
header {
  box-shadow: 0px 3px 12px rgb(0 0 0 / 10%);
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
  transition: 0.5s all;
}
header .nav-bar {
  display: flex;
  height: 100%;
  position: relative;
  min-height: 90px;
  align-items: center;
}
header .nav-bar nav {
  margin: auto 0px auto auto;
}
header .nav-bar ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
header .nav-bar ul > li {
  display: inline-block;
  margin: 0px 10px;
}
header .nav-bar li > a {
  color: #041c27;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 5px 5px;
  font-size: 14px;
  font-weight: 600;
}
header .nav-bar li > a:hover {
  color: #107cac;
}
header .nav-bar ul > li:last-child {
  margin: 0px 0px 0px 6px;
}
header .btn-topbar {
  background-color: #cd3537;
  color: white;
  padding: 5px 20px;
}
.logo {
  position: absolute;
  margin-left: 30px;
}
.logo img {
  max-width: 200px;
} /* OVERLAY CSS */
#js-header.overlay--left:after {
  content: "";
  background-color: rgb(0 0 0 / 80%);
  width: 100%;
  height: 110vh;
  display: block;
  position: fixed;
  pointer-events: unset;
  z-index: 998;
  top: -39px;
} /* PASSO 02. ESTILOS MOBILE */ /* 02.1 Criando Ícone Hamburger */
header .menu-icon {
  cursor: pointer;
  display: none;
  float: right;
  padding: 28px 3px;
  position: relative;
  user-select: none;
}
header .menu-icon .navicon {
  background: #163d4f;
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #163d4f;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
header .menu-icon .navicon:before {
  top: 5px;
}
header .menu-icon .navicon:after {
  top: -5px;
} /* 02.2 Criando Animação Menu Hamburger */
header .menu-btn {
 ...

JavaScript

// Scripts responsáveis por colocar um tamanho para a correção do fixed da Navbar

document.addEventListener("DOMContentLoaded", function () {
  // Depois que o documento HTMl é carregado, vamos colocar uma altura na Fixed Correction

  setTimeout(function () {
    // Tempo para carregar todos os elementos que são link externos

    var fixedCorrection = document.getElementById("js-header").clientHeight;

    document.getElementById("fixedCorrection").style.height =
      fixedCorrection + "px";

    console.log(fixedCorrection);
  }, 1000);
});

// Script com função de checagem botão hamburger

function menuToggle() {
  document.getElementById("menu-btn").checked = false;

  document.getElementById("js-header").classList.remove("overlay--left");
}

// Script para criar Overlay ao abrir navbar

function overlayLeft() {
  if (document.getElementById("menu-btn").checked) {
    document.getElementById("js-header").classList.remove("overlay--left");
  } else {
    document.getElementById("js-header").classList.add("overlay--left");
  }
}

// Script para esconder barra do topo ao descer

//console.log(window.screen.width);

window.onscroll = function (e) {
  var scrollTop =
    window.pageYOffset !== undefined
      ? window.pageYOffset
      : (document.documentElement || document.body.parentNode || document.body)
          .scrollTop; // Vamos captar em pixels, a quantidade de scroll da página

  var topBar = document.querySelector("#js-topbar").clientHeight;

  if (scrollTop >= 1) {
    // Caso o usuário desca 1 pixel, vamos esconder a barra do topo

    document.getElementById("js-header").style.transform =
      "translateY(-" + topBar + "px)";

    document.getElementById("js-topbar").style.transform =
      "translateY(-" + topBar + "px)";

    if (
      /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      )
    ) {
      // Vamos manipular nossa navbar que abre de lado no mobile, para manter a...