Как создать аффикс или липкую панель навигации?

Опубликовано: 5 Января, 2022

Чтобы создать аффикс или липкую панель навигации, вам необходимо использовать HTML, CSS и JavaScript. HTML создаст структуру тела, CSS сделает его хорошо выглядящим. Такая липкая панель навигации выглядит привлекательно на веб-сайте. Используя JavaScript, вы можете легко сделать панель навигации липкой, когда пользователь прокручивает страницу вниз.

Создание структуры: в этом разделе мы создадим базовую структуру веб-сайта для липкой навигационной панели, когда пользователь прокручивает страницу вниз, на ней будет отображаться эффект.

  • HTML-код для создания структуры:
    <!DOCTYPE html>
    < html >
    < head >
    < title >How To Create a Affix Navbar</ title >
    < meta name = "viewport"
    content = "width=device-width, initial-scale=1" >
    <!-- Google fonts -->
    < link href =
    " https://fonts.googleapis.com/css?family=Special +Elite&display=swap"
    rel = "stylesheet" >
    </ head >
    < body >
    < div class = "header" >
    < img src =
    " https://media.geeksforgeeks.org/wp-content/uploads/20191128123949/cover1.png " >
    </ div >
    < div id = "navlist" >
    < b >GeeksforGeeks</ b >
    < a href = "javascript:void(0)" >Contact us</ a >
    < a href = "javascript:void(0)" >Careers</ a >
    < a href = "javascript:void(0)" >Our Product</ a >
    < a href = "javascript:void(0)" >About us</ a >
    < a href = "javascript:void(0)" >Home</ a >
    </ div >
    < div class = "scrollable"
    style = "padding:15px 15px 4500px;" >
    < b >BLACK FRIDAY</ b >
    < p >
    Want to get huge discounts on GeeksforGeeks
    Courses? This Black Friday, we are bringing
    the shopping festival to you!!! GeeksforGeeks
    is celebrating Black Friday on 29th November
    2019 by providing you huge discounts on all
    its courses for the entire day! This will be
    a great opportunity for you to learn and
    enhance your skills. And that's not all we
    are offering!
    </ p >
    < p >
    There will also be Flash Sales that will go
    live for a particular duration of time where
    you can expect heavy discounts over a few
    courses in addition to the existing discounts.
    These Flash Sales will go live for 4 times
    during the entire day with different courses
    in each flash sale. Want to know more about
    Black Friday? Read on to find out!
    </ p >
    < p >
    Black Friday is the Friday immediately after
    Thanksgiving in the United States, which is
    on 29th November this time. This Black Friday
    Sale is intended to provide you with the best
    courses along with great deals where the
    investment of your time and money will surely
    pay off. So Grab this opportunity, Grab the
    deals and celebrate this Black Friday in the
    most amazing way possible!!!
    </ p >
    < center >
    < h3 >Black Friday Sale Highlights</ h3 >
    </ center >
    < p >
    This Black Friday, GeeksforGeeks is here with
    some Red Hot new deals on online and offline
    courses. Unbelievable offers will also be back
    in Flash Sales but you need to be quick to get
    them. Here's everything you need to know about
    the Black Friday sale by GeeksforGeeks:
    </ p >
    < h4 >All Day Super Sale On All Courses:</ h4 >
    < p >
    There will be a Super Sale on all the available
    courses for the whole day of Black Friday. So
    you can buy your favorite courses at premium
    prices and learn a lot!
    </ p >
    < h4 >4 Flash Sales On Selected Courses:</ h4 >
    < p >
    There will be In Between Flash Sales on different
    courses for 1 hour each on Black Friday. These
    sales will reduce the prices of already discounted
    courses even further. Stay tuned to find out the
    times for different courses on the Flash Sale!
    There are Limited seats so the discount will be
    available on First Come First Serve basis.
    </ p >
    < h4 >Social Media Contest:</ h4 >
    < p >
    There will also be a Social Media Contest about
    “Guessing the Price of a Course” on the Black
    Friday Sale. Try your Luck!! Hefty discounts will
    be live on the following courses for the complete
    day. Grab them and pave the way to your dream
    product-based company!
    < hr >
    < i >
    All the details you will get by clicking this
    < a href =
    " https://www.geeksforgeeks.org/black-friday-sale-programmers-have-carts-geeksforgeeks-has-deals/ " >
    link</ a >
    </ i >
    </ div >
    </ body >
    </ html >

Разработка структуры: в предыдущем разделе мы создали структуру базового веб-сайта. В этом разделе мы разработаем структуру панели навигации и создадим эффект прокрутки вниз на панели навигации с помощью JavaScript.

  • Код CSS, чтобы хорошо выглядела структура:
    <style>
    body {
    margin : 0 ;
    }
    .header {
    text-align : center ;
    width : 100% ;
    }
    #navlist {
    overflow : hidden ;
    background-color : #0074D9 ;
    }
    /* navlist designing */
    #navlist a {
    float : right ;
    display : block ;
    color : #f2f2f2 ;
    text-align : center ;
    padding : 14px 16px ;
    text-decoration : none ;
    font-size : 17px ;
    }
    /* navlist link hover effect */
    #navlist a:hover {
    background-color : #ddd ;
    color : black ;
    }
    #navlist b{
    margin-top : 4px ;
    padding : 8px 12px ;
    color : lime ;
    float : left ;
    font-size : 22px ;
    }
    /* scroll portion desing */
    .scrollable b {
    font-family : 'Special Elite' , cursive ;
    font-size : 28px ;
    }
    .content {
    padding : 16px ;
    }
    .sticky {
    position : fixed ;
    top : 0 ;
    width : 100% ;
    }
    </style>
  • Код JavaScript для липкой панели навигации:
    <script>
    window.onscroll = function () {myFunction()};
    var navlist = document.getElementById( "navlist" );
    var sticky = navlist.offsetTop;
    /* Function to stick the nav bar */
    function myFunction() {
    if (window.pageYOffset >= sticky) {
    navlist.classList.add( "sticky" )
    }
    else {
    navlist.classList.remove( "sticky" );
    }
    }
    </script>

Комбинирование кода HTML, CSS и JavaScript: в этом примере вышеуказанные разделы комбинируются для создания липкого веб-сайта с навигационной панелью.

<!DOCTYPE html>
< html >
< head >
< title >How To Create a Affix Navbar</ title >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
<!-- Google fonts -->
< link href =
" https://fonts.googleapis.com/css?family=Special +Elite&display=swap"
rel = "stylesheet" >
< style >
body {
margin: 0;
}
.header {
text-align: center;
width: 100%;
}
#navlist {
overflow: hidden;
background-color: #0074D9;
}
/* navlist designing */
#navlist a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* navlist link hover effect */
#navlist a:hover {
background-color: #ddd;
color: black;
}
#navlist b{
margin-top: 4px;
padding: 8px 12px;
color:lime;
float: left;
font-size: 22px;
}
/* scroll portion desing */
.scrollable b {
font-family: 'Special Elite', cursive;
font-size: 28px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
</ style >
</ head >
< body >
< div class = "header" >
< img src =
" https://media.geeksforgeeks.org/wp-content/uploads/20191128123949/cover1.png " >
</ div >
< div id = "navlist" >
< b >GeeksforGeeks</ b >
< a href = "javascript:void(0)" >Contact us</ a >
< a href = "javascript:void(0)" >Careers</ a >
< a href = "javascript:void(0)" >Our Product</ a >
< a href = "javascript:void(0)" >About us</ a >
< a href = "javascript:void(0)" >Home</ a >
</ div >
< div class = "scrollable"
style = "padding:15px 15px 4500px;" >
< b >BLACK FRIDAY</ b >
< p >
Want to get huge discounts on GeeksforGeeks
Courses? This Black Friday, we are bringing
the shopping festival to you!!! GeeksforGeeks
is celebrating Black Friday on 29th November
2019 by providing you huge discounts on all
its courses for the entire day! This will be
a great opportunity for you to learn and
enhance your skills. And that's not all we
are offering!
</ p >
< p >
There will also be Flash Sales that will go
live for a particular duration of time where
you can expect heavy discounts over a few
courses in addition to the existing discounts.
These Flash Sales will go live for 4 times
during the entire day with different courses
in each flash sale. Want to know more about
Black Friday? Read on to find out!
</ p >
< p >
Black Friday is the Friday immediately after
Thanksgiving in the United States, which is
on 29th November this time. This Black Friday
Sale is intended to provide you with the best
courses along with great deals where the
investment of your time and money will surely
pay off. So Grab this opportunity, Grab the
deals and celebrate this Black Friday in the
most amazing way possible!!!
</ p >
< center >
< h3 >Black Friday Sale Highlights</ h3 >
</ center >
< p >
This Black Friday, GeeksforGeeks is here with
some Red Hot new deals on online and offline
courses. Unbelievable offers will also be back
in Flash Sales but you need to be quick to get
them. Here's everything you need to know about
the Black Friday sale by GeeksforGeeks:
</ p >
< h4 >All Day Super Sale On All Courses:</ h4 >
< p >
There will be a Super Sale on all the available
courses for the whole day of Black Friday. So
you can buy your favorite courses at premium
prices and learn a lot!
</ p >
< h4 >4 Flash Sales On Selected Courses:</ h4 >
< p >
There will be In Between Flash Sales on different
courses for 1 hour each on Black Friday. These
sales will reduce the prices of already discounted
courses even further. Stay tuned to find out the
times for different courses on the Flash Sale!
There are Limited seats so the discount will be
available on First Come First Serve basis.
</ p >
< h4 >Social Media Contest:</ h4 >
< p >
There will also be a Social Media Contest about
“Guessing the Price of a Course” on the Black
Friday Sale. Try your Luck!! Hefty discounts will
be live on the following courses for the complete
day. Grab them and pave the way to your dream
product-based company!
< hr >
< i >
All the details you will get by clicking this
< a href =
" https://www.geeksforgeeks.org/black-friday-sale-programmers-have-carts-geeksforgeeks-has-deals/ " >
link</ a >
</ i >
</ div >
< script >
window.onscroll = function() {myFunction()};
var navlist = document.ge
JavaScript Вопросы о Web технологиях HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023