Header + Topbar + Search - Comp. Interago

Diagramação de Header com busca e Topbar

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">
<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">

            <img width="16" height="16" src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-map-marker-alt.svg" alt="Ícone Ponteiro" />

            <span>Av. Trocar, n° 999, Cidade Trocar</span>

          </a>

          <a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Falar no WhatsApp - NOME EMPRESA" rel="noopener noreferrer nofollow">

            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-whatsapp.svg" width="16" height="16" alt="Ícone WhatsApp" /> <span>+55 (88) 99911-0253</span>

          </a>

          <!-- REDES SOCIAIS, DESCOMENTAR PARA HAB. -->

          <!--<a

            href="#"

            target="_blank"

            title="Ir para Perfil do Instagram - NOME EMPRESA"

            rel="noopener noreferrer nofollow"

          >

            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-instagram.svg" width="16" height="16" alt="Ícone Instagram" />

          </a>

          <a

            href="#"

            target="_blank"

            title="Ir para a Página do Facebook - NOME EMPRESA"

            rel="noopener noreferrer nofollow"

          >

            <img src="https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-facebook-square-o.svg" width="16" height="16" alt="Ícone Facebook" />

          </a>-->

          <a href="contato" title="Ir para Página...

CSS

body {
  height: 3000px;
  background-color: #000;
  margin: 0px;
  font-family: 'Futura Bk BT';
}

/* NAVBAR  */

/* 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: 15px;
  font-weight: 500;
}

header .nav-bar li>a:hover {
  color: #0098db;
}

header .nav-bar ul>li:last-child {
  margin: 0px 0px 0px 6px;
}

header .btn-topbar {
  background-color: #cd3537;
  color: white;
  padding: 5px 20px;
}

.logo img {
  max-width: 160px;
  display: block;
}

/* 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;
}

/* CORREÇÃO BARRA FIXA */

.fixedCorrection {
  height: 124px;
}

/* ESTILOS MOBILE */ 

/* 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...

JavaScript

// Script com função de checagem busca

function searchToggle() {
  if (document.getElementById("inputSearchBtn").checked) {
    document.getElementById("mobileSearch").classList.remove("active");
  } else {
    document.getElementById("mobileSearch").classList.add("active");
  }
}

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

function menuToggle() {
  document.getElementById("menu-btn").checked = false;
	document.getElementById("nav-list").classList.remove("active");
  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");
    document.getElementById("nav-list").classList.remove("active");
  } else {
    document.getElementById("js-header").classList.add("overlay--left");
    document.getElementById("nav-list").classList.add("active");
  }
}

// Script para esconder barra do topo ao descer

window.addEventListener('scroll', function(event) {
  let screenWidthChange = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    navListFix(screenWidthChange);
}, true);

window.addEventListener('resize', function(event) {
  let screenWidthChange = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    navListFix(screenWidthChange);
}, true);

function navListFix(screenWidth) {
  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)";

   ...