Headers
Sticky Header with Top Scroll
24 Nov 2022
Ефект появи хедера після скрола угору
HTML
SCSS
PostCSS
JS
<header class="header fixed">
<div class="cont">
<div class="navbar">
<a href="./index.html" class="logo">
<img src="./assets/images/logo.svg" alt="" />
</a>
<nav class="navbar-nav nav-slide-right">
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="./index.html">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="./about-us.html">About Us</a>
</li>
<li class="menu-item dropdown">
<a class="menu-link dropdown-toggle" href="./job-search.html">Job Board</a>
<ul class="dropdown-menu">
<li><a class="menu-link" href="/">engineering</a></li>
<li><a class="menu-link" href="/">software & it</a></li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="./insights.html">Insights Hub</a>
</li>
<li class="menu-item dropdown">
<a class="menu-link dropdown-toggle" href="./meet-the-team.html">Meet the team</a>
<ul class="dropdown-menu">
<li><a class="menu-link" href="/">engineering</a></li>
<li><a class="menu-link" href="/">software & it</a></li>
<li><a class="menu-link" href="/">engineering</a></li>
<li><a class="menu-link" href="/">software & it</a></li>
<li><a class="menu-link" href="/">engineering</a></li>
<li><a class="menu-link" href="/">software & it</a></li>
<li><a class="menu-link" href="/">engineering</a></li>
<li><a class="menu-link" href="/">software & it</a></li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="./client-hub.html">Client Hub</a>
</li>
<li class="menu-item">
<a class="menu-link" href="./contact-us.html">Contact Us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="./usecases.html">Use Cases</a>
</li>
</ul>
</nav>
<div class="burger menu-toggle">
<span></span>
</div>
</div>
</div>
</header>
<div class="header-close-wrapper"></div>
.header {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 999;
height: ac(120px, 75px);
padding: ac(25px, 15px) 0;
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
&.scrolled {
background: rgba(var(--black-rgb), 0.8);
backdrop-filter: blur(10px);
height: ac(100px, 60px);
.logo {
width: ac(130px, 60px);
}
}
.logo {
height: 100%;
width: ac(100px, 70px);
flex-shrink: 0;
&::before {
display: none;
}
&:hover {
transform: scale(1.06);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.burger {
display: none;
}
.navbar-nav {
display: flex;
flex-grow: 1;
}
.menu {
width: 100%;
display: flex;
justify-content: flex-end;
}
.menu-item {
margin-right: 20px;
position: relative;
&.dropdown {
& > .menu-link {
display: inline-flex;
justify-content: space-between;
align-items: center;
&::after {
content: "\e999";
font-family: "icomoon";
font-size: ac(10px, 8px);
padding-left: 10px;
}
}
}
}
&:not(.header-mobile) {
.menu-item {
@media (min-width: $mobile-menu-end-point) {
padding: 5px 0;
}
&:hover {
@media (min-width: $mobile-menu-end-point) {
.dropdown-menu {
display: block;
}
}
}
}
}
.menu-link {
position: relative;
font-size: ac(16px, 14px);
@include transition-all;
&::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background: var(--white);
@include transition-all;
}
&:hover {
color: var(--primary);
&::before {
width: 100%;
left: 0;
background: var(--primary);
}
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
padding: 10px 10px 10px 15px;
border-radius: 10px;
background: var(--bg-second);
box-sizing: content-box;
display: none;
li {
.menu-link {
padding: 5px 0;
text-transform: capitalize;
}
}
}
}
.header {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 999;
height: ac(120px, 75px);
padding: ac(25px, 15px) 0;
display: flex;
align-items: center;
transition: all 0.3s ease-in-out;
&.scrolled {
background: rgba(var(--black-rgb), 0.8);
backdrop-filter: blur(10px);
height: ac(100px, 60px);
.logo {
width: ac(130px, 60px);
}
}
.logo {
height: 100%;
width: ac(100px, 70px);
flex-shrink: 0;
&::before {
display: none;
}
&:hover {
transform: scale(1.06);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.burger {
display: none;
}
.navbar-nav {
display: flex;
flex-grow: 1;
}
.menu {
width: 100%;
display: flex;
justify-content: flex-end;
}
.menu-item {
margin-right: 20px;
position: relative;
&.dropdown {
& > .menu-link {
display: inline-flex;
justify-content: space-between;
align-items: center;
&::after {
content: "\e999";
font-family: "icomoon";
font-size: ac(10px, 8px);
padding-left: 10px;
}
}
}
}
&:not(.header-mobile) {
.menu-item {
@media (--mobile-menu-end-point) {
padding: 5px 0;
}
&:hover {
@media (--mobile-menu-end-point) {
.dropdown-menu {
display: block;
}
}
}
}
}
.menu-link {
position: relative;
font-size: ac(16px, 14px);
@mixin transition-all;
&::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background: var(--white);
@mixin transition-all;
}
&:hover {
color: var(--primary);
&::before {
width: 100%;
left: 0;
background: var(--primary);
}
}
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
padding: 10px 10px 10px 15px;
border-radius: 10px;
background: var(--bg-second);
box-sizing: content-box;
display: none;
li {
.menu-link {
padding: 5px 0;
text-transform: capitalize;
}
}
}
}
// Hide and show Header when scroll up
function headerSticky() {
let prevScrollPos = window.pageYOffset;
window.onscroll = () => {
const currentScrollPos = window.pageYOffset;
const headerHeight = header.scrollHeight;
if (window.scrollY > 0) {
if (prevScrollPos > currentScrollPos) {
header.style.top = 0;
header.classList.add("scrolled");
} else {
header.style.top = `-${headerHeight + 3}px`;
}
}
if (window.scrollY === 0) {
header.classList.remove("scrolled");
}
prevScrollPos = currentScrollPos;
};
if (window.scrollY !== 0) {
header.classList.add("scrolled");
}
}
