TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Липкое меню с прозрачностью до начала скрола страницы

1 025

При создании лендингов, бывает необходимость отобразить первый (еще его называют главным) экран с бэкграундом во всю высоту экрана, из-за чего могут возникать трудности с меню и логотипом расположенным в данном меню. В данной записи я приготовил небольшой скрипт и стили для решения данной задачи. Здесь все просто, как только пользователь открывает страницу меню становится полностью прозрачным до тех пор пока посетитель не начал скролить страницу.

Естественно что данный скрипт и стили предоставлены в качестве костяка на котором можно строить свои решения.

JS

/* Прозрачность для меню START */ jQuery( document ).ready(function( $ ) { if ( $(window).width() >= 990) { $(window).scroll(function(){ if ($(window).scrollTop() > 100) { //Стили для меню - когда СРАБОТАЛО липкое меню (страницу начали скролить) $('nav#site-navigation').css({'background-color':'rgba(255, 255, 255, 0.75)'}); $('.menu a').css({'color': '#000000'}); $('i.fa.fa-search').css({'color': 'green'}); } else { //Стили для меню - когда еще не сработало липкое меню (страница была только открыта) $('nav#site-navigation').css({'background-color':'rgba(0, 128, 0, 0)'}); $('a').css({'color': 'white'}); $('i.fa.fa-search').css({'color': 'white'}); } }); }; }); /* Прозрачность для меню END */ /* Изменение изображения логотипа при скроле START*/ jQuery( document ).ready(function( $ ) { $(window).scroll(function(){ if ($(window).scrollTop() > 1) { //1 // if ($('.fullPage-1').hasClass('active')){ $('img.logo').attr("src",'http://DOMMENNOEIMYA/wp-content/uploads/2018/01/favicon.png'); // $('#fp-nav ul li a span').css({'background':'white'}); } else { $('img.logo').attr("src",'http://DOMMENNOEIMYA/wp-content/uploads/2018/01/favicon-white.png'); // $('#fp-nav ul li a span').css({'background':'#4b944e'}); }; // }; }); }); /* Изменение изображения логотипа при скроле END*/

CSS

/* Прозрачность меню */ header#masthead { position: absolute; margin-top: 0px; z-index: 15; width: 100vw; } nav#site-navigation { background-color: #00296500; color: white; } nav#site-navigation { box-shadow: none !important; } nav { border-bottom: none !important; } /*END*/

Источник записи: https://mediadoma.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее