Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<nav> <ul> <li><a href="#section-1">Секция 1</a></li> <li><a href="#section-2">Секция 2</a></li> <li><a href="#section-3">Секция 3</a></li> <li><a href="#section-4">Секция 4</a></li> <li><a href="#section-5">Секция 5</a></li> </ul> </nav> <header>Шапка</header> <section id="section-1">Секция 1</section> <section id="section-2">Секция 2</section> <section id="section-3">Секция 3</section> <section>Секция без пункта меню</section> <section id="section-4">Секция 4</section> <section id="section-5">Секция 5</section> <footer>Подвал</footer> |
CSS:
В данном примере предусмотрена возможность выделять не только пункт меню видимой секции, но и ее саму, используя класс section.active
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
nav { height: 80px; position: fixed; top: 0; left: 0; background: #337AB7; width: 100%; font-family: Verdana, sans-serif; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 80px; } nav ul li { margin: 0 10px; } nav ul li a { color: #BFE2FF; display: inline-flex; font-size: 18px; text-transform: uppercase; text-decoration: none; font-weight: bold; transition: all 0.3s ease; border-bottom: 2px solid transparent; } nav ul li a:hover { color: #FFF; } nav ul li a.active { border-bottom: 2px solid #FFF; padding-bottom: 6px; color: #FFF; } section, header, footer { background: #fff; border-bottom: 4px solid #337AB7; height: 600px; display: flex; flex-flow: column; align-items: center; justify-content: center; font-size: 40px; text-transform: uppercase; color: #337AB7; font-weight: bold; font-family: Verdana, sans-serif; } section:nth-child(even) { background: #BFE2FF; } section:first-child { margin-top: 60px; } section.active { /* Стиль для активной секции */ } header, footer { height: 400px; background: #337AB7; color: #FFF; } |
jQuery:
180 в данном коде - это произвольное значение, позволяющее переключиться на нижнюю секцию немного раньше, чем она дойдет до фиксированного меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
let sections = $('section'), nav = $('nav'), nav_height = nav.outerHeight(); $(window).on('scroll', function () { $('nav a').removeClass('active'); let cur_pos = $(this).scrollTop(); sections.each(function() { let top = $(this).offset().top - nav_height - 180, bottom = top + $(this).outerHeight(); if (cur_pos >= top && cur_pos <= bottom) { nav.find('a').removeClass('active'); sections.removeClass('active'); $(this).addClass('active'); nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); } }); }); nav.find('a').on('click', function () { let $el = $(this), id = $el.attr('href'); $('html, body').animate({ scrollTop: $(id).offset().top - nav_height }, 600); return false; }); |
Добавить комментарий: