«
»
JavaScriptjQueryWEBWordPressWordPress - CSSWordPress - jQuery

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

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

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

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

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

Связанные записи
PageSpeed InsightsWordPressПанели управления

Как повысить производительность WordPress - советы от Plesk

LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

WordPress

WordPress 5.5 - 20 новых функций и много улучшений. Что нового в WP.

WordPressПлагины

Плагин Pinterest Automatic Pin Wordpress от ValvePress (авто постинг в Pinterest на автомате)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *