Как плавно скрыть элементы в sticky header
Доброго времени суток.
Я зафиксировал шапку при скролле, однако при скролле, когда он скрывает ненужные мне элементы, это делается не плавно.
$(function() {
let header = $('.header');
let hederHeight = header.height();
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
header.addClass('header_fixed');
$('body').css({
'paddingTop': hederHeight + 'px'
});
} else {
header.removeClass('header_fixed');
$('body').css({
'paddingTop': 0
})
}
let scrollisable1 = $('.scrollisable1').first();
let scrollisable2 = $('.scrollisable2').first();
let scrollisable3 = $('.scrollisable3').first();
let scrollisable4 = $('.scrollisable4').first();
if ($(this).scrollTop() > 1) {
scrollisable1.fadeOut();
scrollisable2.fadeOut();
scrollisable3.fadeOut();
scrollisable4.fadeOut();
} else {
scrollisable1.fadeIn();
scrollisable2.fadeIn();
scrollisable3.fadeIn();
scrollisable4.fadeIn();
}
});
});/* Header start */
header {
width: 100%;
background: #fff;
z-index: 100;
}
header .row {
align-items: center;
padding: 5px 0;
}
header p {
margin: 0;
}
.header_title {
padding-left: 15px;
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.red_title {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 33px;
letter-spacing: -0.04em;
text-transform: uppercase;
color: #ed2939;
}
.red_subtitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #121a37;
text-transform: uppercase;
}
.header_social {
display: flex;
justify-content: center;
}
.header_social a {
margin-right: 15px;
width: 34px;
height: 34px;
border-radius: 60px;
padding: 8px 7px 7px 8px;
}
.viber {
background-color: #574e92;
}
.whatsapp {
background-color: #00e676;
}
.telegram {
background-color: #27a6e5;
}
.email {
background-color: #000000;
}
.header_social .viber:hover,
.header_social .whatsapp:hover,
.header_social .telegram:hover,
.header_social .email:hover {
background-color: #ed2939;
}
.phone {
margin: 0px 104px;
}
.header_phone {
display: flex;
flex-direction: column;
align-items: center;
}
.header_phone a {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 21px;
line-height: 29px;
color: #121a37;
text-decoration: none;
}
.header_phone .subtitle_phone {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: #ed2939;
}
.title_schedule {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(18, 26, 55, 0.4);
}
.subtitle_schedule {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #121a37;
}
.header_fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #ffffff;
display: flex;
align-items: center;
}
.header_fixed .container {
width: 40%!important;
}
.header_fixed .container .row>.col {
width: 90%;
}
.header_fixed .header_logo {
float: right;
}
.header_fixed .navbar {
background: #ffffff;
height: auto;
}
.header_fixed .navbar-nav {
display: flex;
flex-direction: row;
align-items: flex-end;
padding: 0px;
gap: 28px;
position: absolute;
width: 962px;
height: 20px;
left: 0;
top: 8px;
padding: 9px 0px;
}
.header_fixed .navbar-expand-lg .navbar-nav .nav-link {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 20px;
text-transform: uppercase;
color: #ed2939;
}
/* Header end */<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col col-lg-2">
<div class="header_logo">
<a href="/"><img src="/images/header/logo.webp" alt="Логотип"></a>
</div>
</div>
<div class="col col-lg-3 scrollisable1">
<div class="header_title">
<p class="red_title">Более 13 лет</p>
<p class="red_subtitle">Успешной работы</p>
</div>
</div>
<div class="col scrollisable2">
<div class="header_social">
<a href="" class="viber"><img src="images/header/social_icon/viber.svg" alt="viber"></a>
<a href="" class="whatsapp"><img src="images/header/social_icon/whatsapp.svg" alt="whatsapp"></a>
<a href="" class="telegram"><img src="images/header/social_icon/telegram.svg" alt="telegram"></a>
<a href="" class="email"><img src="images/header/social_icon/mail.svg" alt="email"></a>
</div>
</div>
<div class="col col-lg-3 scrollisable3">
<div class="header_phone">
<a href="tel:+88003334871">+8 800 3334-871</a>
<span class="subtitle_phone">Бесплатно по России</span>
</div>
</div>
<div class="col scrollisable4">
<div class="schedule">
<p class="title_schedule">Ежедневно</p>
<p class="subtitle_schedule">с 8.00 до 18.00</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">главная</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">каталог продукции</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Услуги</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">доставка</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">новости</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">о компании</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">контакты</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">сделать заказ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div>
<p>Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет выполнять важные задания по разработке существенных финансовых и административных условий.
</p>
<p>Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет выполнять важные задания по разработке существенных финансовых и административных условий.
</p>
<p>Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет выполнять важные задания по разработке существенных финансовых и административных условий.
</p>
<p>Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет выполнять важные задания по разработке существенных финансовых и административных условий.
</p>
<p>Задача организации, в особенности же постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет выполнять важные задания по разработке системы обучения кадров, соответствует насущным потребностям. С другой стороны начало повседневной работы по формированию позиции позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что реализация намеченных плановых заданий позволяет выполнять важные задания по разработке существенных финансовых и административных условий.
</p>
</div>
</body>
</html>