Додаткова фіксована навігація

23

Від автора: Додаткова навігація призначена для тих користувачів, яким хотілося б швидко переглянути вміст сторінки і мати можливість легко переходити від одного розділу сторінки до іншої.

Фіксована навігація з ефектом плавної прокрутки, створеної за допомогою jQuery. У створенні цього ефекту немає нічого незвичайного, але цей прийом стане в нагоді вам для створення додаткового меню, що дозволяє швидко переміщатися по контенту сторінки. Зараз цей ефект можна побачити на багатьох сайтах. Хорошим прикладом, який мені запам’ятався, є сайт Disqus For Websites. Вдалим рішенням є анімація логотипу і двох кнопок із «закликом до дії» (call-to-action) при появі фіксованого навігації.

Додаткова фіксована навігаціяДодаткова фіксована навігація

Створення структури

Ми створили елемент section #cd-intro, щоб обернути початкове зображення, підзаголовок і кнопку «заклик до дії».
Додаткова навігація є ненумерованным списком, розташованим всередині елемента .cd-secondary-nav. Весь інший контент розташований всередині елемента .cd-main-content.

Menu

  • Services

Додавання стилів

Оскільки цей ресурс став створюватися спочатку під мобільні пристрої, ми присвоїли властивість position: fixed для ненумерованного списку всередині елемента .cd-secondary-nav і розмістили його в правій нижній частині вікна перегляду. Коли користувач натискає на елемент .cd-secondary-nav-trigger, ми призначаємо клас .is-visible для ненумерованного списку, змінюючи значення CSS3 параметра scale з 0 на 1.

Коли вікно перегляду більше 1170px, ми приховуємо елемент .cd-secondary-nav-trigger і міняємо властивість position у ненумерованного списку із fixed на static, щоб він був видний всередині елемента .cd-secondary-nav, відразу після елемента section#cd-intro.

.cd-secondary-nav ul {
position: fixed;
right: 5%;
bottom: 20px;
visibility: hidden;
transform: scale(0);
transform-origin: 100% 100%;
transition: transform 0.3 s, visibility 0s 0.3 s;
}
.cd-secondary-nav ul.is-visible {
visibility: visible;
transform: scale(1);
transition: transform 0.3 s, visibility 0s 0s;
}
@media only screen and (min-width: 1170px) {
.cd-secondary-nav ul {
/* скидання значень у навігації */
position: static;
width: auto;
max-width: 100%;
visibility: visible;
transform: scale(1);
}
}
.cd-secondary-nav-trigger {
position: fixed;
bottom: 20px;
right: 5%;
width: 44px;
height: 44px;
}
@media only screen and (min-width: 1170px) {
.cd-secondary-nav-trigger {
display: none;
}
}

Коли користувач прокручує сторінку на відстань, що перевищує висоту елемента section#cd-intro, ми призначаємо клас .is-fixed для елемента .cd-secondary-nav, змінюючи у нього значення властивості position з relative на fixed і зменшуючи його висоту, а потім ми додаємо клас .animate-children для анимирования дочірніх елементів. Ми не можемо тут використовувати лише один клас із-за «бага» у браузера Firefox (CSS анімація переходу не спрацьовує, коли батьківського елемента змінюється властивість position). Більш докладно про це йдеться далі у розділі Обробка подій.

@media only screen and (min-width: 1170px) {
.cd-secondary-nav.is-fixed {
position: fixed;
left: 0;
top: 0;
height: 70px;
width: 100%;
}
.cd-secondary-nav li a {
padding: 58px 40px 0 40px;
transition: padding 0.2 s;
}
.cd-secondary-nav li a span {
transition: opacity 0.2 s;
}
.cd-secondary-nav.animate-children li a {
padding: 26px 30px 0 30px;
}
.cd-secondary-nav.animate-children li a span {
opacity: 0;
}
}

Нам також хотілося б показувати логотип і кнопку «заклик до дії», коли додаткова навігація буде зафіксована. Для цього нам потрібно оголосити два класи: .is-hidden і .slide-in (перший клас застосовується, коли користувач прокручує сторінку далі нижньої межі елемента #cd-intro-tagline, другий – далі верхньої межі елемента .cd-secondary-nav).

@media only screen and (min-width: 1170px) {
#cd-logo.is-hidden {
/* призначаємо фіксоване позиціонування і переміщаємо за межі вікна перегляду (ліворуч) */
opacity: 0;
position: fixed;
left: -20%;
transition: left 0.3 s, opacity 0.3 s;
}
#cd-logo.is-hidden.slide-in {
/* з’являється, коли додаткова навігація стає фіксованою */
left: 5%;
opacity: 1;
}
.cd-btn.is-hidden {
/* призначаємо фіксоване позиціонування і переміщаємо за межі вікна перегляду (направо) */
opacity: 0;
position: fixed;
right: -20%;
transition: right 0.3 s, opacity 0.3 s;
}
.cd-btn.is-hidden.slide-in {
/* з’являється, коли додаткова навігація стає фіксованою */
right: 5%;
opacity: 1;
}
}

Обробка подій

Коли користувач прокручує сторінку далі зміщеною верхньої межі додаткової навігації, ми призначаємо клас .is-fixed, щоб змінити значення властивості position; ми додаємо клас .animate-children з затримкою в 50 мс (через бага в браузері Firefox) для того щоб анімувати дочірні елементи. Таким чином, зміна значення властивості position не вплине на ефект переходу, оскільки вони відбуватимуться в різний час.

var secondaryNav = $(‘.cd-secondary-nav’),
secondaryNavTopPosition = secondaryNav.offset().top;
$(window).on(‘scroll’, function(){
if($(window).scrollTop() > secondaryNavTopPosition ) {
secondaryNav.addClass(‘is-fixed’);
setTimeout(function() {
secondaryNav.addClass(‘animate-children’);
$(‘#cd-logo’).addClass(‘slide-in’);
$(‘.cd-btn’).addClass(‘slide-in’);
}, 50);
} else {
secondaryNav.removeClass(‘is-fixed’);
setTimeout(function() {
secondaryNav.removeClass(‘animate-children’);
$(‘#cd-logo’).removeClass(‘slide-in’);
$(‘.cd-btn’).removeClass(‘slide-in’);
}, 50);
}
});