Сегодня в этом блоге вы узнаете, как скрыть панель навигации при прокрутке вниз с помощью HTML CSS и JavaScript. Как вы видели на многих веб-сайтах, есть панель меню навигации, и при прокрутке вниз эта панель навигации или панель навигации автоматически скрываются.
Эти дизайны или функции по-прежнему в тренде и используются многими веб-сайтами. Теперь пришло время создать панель навигации и скрыть ее при прокрутке вниз с помощью JavaScript.
Панель навигации — это элемент пользовательского интерфейса на веб-странице, который содержит ссылки для перенаправления других разделов веб-сайта. Панель навигации веб-сайта чаще всего используется для отображения горизонтального списка ссылок в верхней части каждой страницы. Он может быть под заголовком/панелью навигации или логотипом, но всегда располагается перед основным содержимым веб-страницы.
Сегодня в этом блоге я поделюсь с вами этой программой (прокрутите вниз, чтобы скрыть панель навигации). Сначала на веб-странице есть панель навигации и несколько фиктивных текстов. И когда вы прокручиваете вниз, верхняя панель меню навигации скрывается, а когда вы прокручиваете вверх, эта скрытая панель навигации появляется. Эта задача выполняется только с использованием JavaScript.
Если вам трудно понять, что я говорю. Вы можете посмотреть полное видеоруководство по этой программе (прокрутите вниз, чтобы скрыть панель навигации с помощью HTML CSS и JavaScript).
Пример горизонтального меню при прокрутки страницы вниз
Если вам нравится эта программа (прокрутите вниз, чтобы скрыть панель навигации с помощью HTML CSS и JavaScript) и хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Исходные коды
Чтобы создать эту программу (прокрутите вниз, чтобы скрыть панель навигации). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hide Navbar on Scroll Down</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<nav>
<label>CodingNepal</label>
<ul>
<li class="active" ><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blogs</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
<div class="content">
<h2 class="header">
Hide Navbar Bar On Scroll
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur iure, error, dolores alias aliquam, voluptatibus blanditiis qui sint laborum veritatis fugiat mollitia assumenda delectus illum maiores accusantium dolorum id, dolor eum aperiam. Porro saepe incidunt earum deleniti, harum dolorem facilis impedit corrupti. Sint, repudiandae qui assumenda dolorem rem, eaque iusto mollitia? Nemo quasi voluptatem eveniet, labore perferendis ratione, sunt hic praesentium illum similique suscipit neque quibusdam. Dolores dolorum neque beatae, itaque harum dolorem fugiat, corporis ea quisquam assumenda? Dolore alias maxime sapiente, accusamus nesciunt vitae maiores ullam labore dolorem, illo quasi ad mollitia beatae debitis itaque. Rerum eos voluptates laudantium?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur iure, error, dolores alias aliquam, voluptatibus blanditiis qui sint laborum veritatis fugiat mollitia assumenda delectus illum maiores accusantium dolorum id, dolor eum aperiam. Porro saepe incidunt earum deleniti, harum dolorem facilis impedit corrupti. Sint, repudiandae qui assumenda dolorem rem, eaque iusto mollitia? Nemo quasi voluptatem eveniet, labore perferendis ratione, sunt hic praesentium illum similique suscipit neque quibusdam. Dolores dolorum neque beatae, itaque harum dolorem fugiat, corporis ea quisquam assumenda? Dolore alias maxime sapiente, accusamus nesciunt vitae maiores ullam labore dolorem, illo quasi ad mollitia beatae debitis itaque. Rerum eos voluptates laudantium?
</p>
<h2 id="about">
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="blog">
Blogs Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="gallery">
Gallery Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<h2 id="services">
Services Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, vel ex, accusantium tempora aliquam dolorem! Nesciunt itaque sapiente eius culpa enim ipsam facilis, amet beatae ea velit illo placeat omnis eum error consequatur recusandae esse magnam, rem hic doloremque necessitatibus earum delectus? Dignissimos exercitationem consequatur quae, reprehenderit soluta! Beatae itaque, maxime, illo aut rerum hic veniam nihil perferendis delectus neque excepturi enim iure impedit minus molestias dolor consequatur nisi praesentium tempore quos perspiciatis eius fugit similique sapiente! Nisi, ab, velit.
</p>
<ul>
<li>User Account</li>
<li>Profile Picture</li>
<li>Messages List</li>
</ul>
<center>
"Subscribe to CodingNepal"
</center>
</div>
<script>
let navbar = document.querySelector('nav');
var scrollPrev = window.pageYOffset;
window.onscroll = function(){
var scrollCur = window.pageYOffset;
if(scrollPrev > scrollCur){
navbar.style.top = "0";
}else{
navbar.style.top = "-90px";
}
scrollPrev = scrollCur;
}
</script>
<script>
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Noto+Sans|Open+Sans:500,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat',sans-serif;
scroll-behavior: smooth;
}
body::selection{
color: white;
background: #0089f2;
}
body::-webkit-scrollbar{
width: 16px;
}
body::-webkit-scrollbar-track{
background: #e6e6e6;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb{
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: linear-gradient(#3498db,#9b59b6);
}
body::-webkit-scrollbar-thumb:hover{
background: linear-gradient(#2691d9,#954eb1);
}
nav{
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
background: white;
box-shadow: 1px 1px 15px silver;
z-index: 1;
transition: top 0.3s;
}
label{
line-height: 80px;
padding: 0 80px;
font-size: 40px;
color: #0089f2;
letter-spacing: -1px;
user-select: none;
}
nav ul{
list-style: none;
position: absolute;
right: 0;
top: 0;
display: flex;
line-height: 80px;
margin-right: 50px;
}
nav ul li{
margin: 0 5px;
}
nav ul li.active a{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
nav ul li:hover a{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
nav ul li a{
color: grey;
padding: 10px 20px;
border-radius: 5px;
border: 1px solid transparent;
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
}
nav ul li a.active2{
color: #0089f2;
box-shadow: inset 0 0 5px #0a87f5,
inset 0 0 10px #85c3fa,
inset 0 0 15px #b6dbfc;
}
.content{
position: absolute;
top: 100px;
padding: 0 80px;
}
.content h1.header{
font-size: 55px;
}
.content p{
padding: 10px 0;
font-size: 18px;
text-align: justify;
font-family: 'Noto Sans', sans-serif;
}
.content h2{
font-size: 45px;
}
.content ul{
padding: 0 0 10px 30px;
}
.content ul li{
font-size: 20px;
font-family: 'Noto Sans', sans-serif;
}
center{
color: #0089f2;
font-size: 22px;
margin-bottom: 20px;
}
JAVASCRIPT КОД:
<script>
let navbar = document.querySelector('nav');
var scrollPrev = window.pageYOffset;
window.onscroll = function(){
var scrollCur = window.pageYOffset;
if(scrollPrev > scrollCur){
navbar.style.top = "0";
}else{
navbar.style.top = "-90px";
}
scrollPrev = scrollCur;
}
</script>
<script>
$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
</script>
Вот и все, теперь вы успешно создали прокрутку вниз, чтобы скрыть панель навигации с помощью HTML CSS и JavaScript. Если ваш код не работает или вы столкнулись с какой-либо ошибкой/проблемой, прокомментируйте или свяжитесь с нами со страницы контактов.