Workstation Pro
Для одного из проектов захотелось модифицировать тему Studiopress WorkStation Pro так, чтобы при прокрутке страницы меню не исчезало. Получилось. Рассказываем, как.
При прокрутке страницы вниз меню у нас будет слега уменьшаться (с анимацией). При обратной прокрутке (вверх), меню примет оригинальный размер.
Такое поведение будет присутствовать на экранах > 880px. На меньших экранах в этой теме меню превращается в гамбургер — не будем этому препятствовать.
Шаг 1
Создайте файл с названием, допустим, global.js в директории js темы Workstation Pro, содержащий следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(function( $ ){ function addScrolled() { if(window.innerWidth > 880) { if ( $( document ).scrollTop() > 0 ){ $( '.site-header' ).addClass( 'scrolled' ); } else { $( '.site-header' ).removeClass( 'scrolled' ); } } }; $( document ).on('scroll', addScrolled); $( window ).on('resize', addScrolled); }); |
Шаг 2
В файле functions.php после кода
|
1 |
wp_enqueue_script( 'workstation-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menus' . $suffix . '.js', array( 'jquery' ), CHILD_THEME_VERSION, true ); |
добавьте
|
1 |
wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), CHILD_THEME_VERSION, true ); |
Шаг 3
В файл style.css добавьте такой код:
|
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 |
.site-header > .wrap { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media only screen and (min-width: 881px) { .site-header { position: fixed; z-index: 100; top: 0; width: 100%; } .admin-bar .site-header { top: 32px; } .site-header + * { margin-top: 180px; } .site-header.scrolled { box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); } .site-header.scrolled > .wrap { padding: 10px 0; } } |
Всё! Удачи!
