Scrollspy jquery

HIT

20.06.2016

1223

Скрипт scrollspy jquery отслеживающий положение скрола, в котором мы находится в данный момент. Чаще всего это используется для изменения состояния меню, изменение фона, а также для каких-либо событий.

Подключение скрипта Scrollspy jquery

wp_enqueue_script( 'jquery-scrollspy', get_template_directory_uri() . '/js/jquery-scrollspy.js' , array( ), '1.0' , 'screen' );

Изменение состояния пункта меню

Верстка

<div class="container">

<ul class="test-menu">

<li id="white">white</li>
<li id="red">red</li>
<li id="blue">blue</li>
<li id="green">green</li>
<li id="black">black</li>
</ul>

<div class="content">
<div class="row">
<div class="span16">
<h2>Scroll down and see the color change !</h2>
<div id="white" class="color"><h2>The White Team</h2></div>
<div id="red" class="color"><h2>The Red Team</h2></div>
<div id="blue" class="color"><h2>The Blue Team</h2></div>
<div id="green" class="color"><h2>The Green Team</h2></div>
<div id="black" class="color"><h2>The Black Team</h2></div>

</div>
</div>
</div>

</div> <!-- /container -->

Стили

ul.test-menu {
    position: fixed;
    width: 100%;
}  
  
  ul.test-menu li {
    float: left;
    width: 20%;
    list-style: none;
}
  
li.test-action {
    background-color: #d5ffc4;
}  
  
  
.content {
	background-color: #fff;
	width: 50%;
    padding: 20px;
}

.color{ height: 600px; } 

Данный скрипт добавляет класс пункту меню с таким же классом как контейнер на котором мы находимся. И еще добавляет фоновый цвет (название ID) к body.

$(document).ready(function() {
        $('.color').each(function(i) {
        		var position = $(this).position();
        		console.log(position);
        		console.log('min: ' + position.top + ' / max: ' + parseInt(position.top + $(this).height()));
        		$(this).scrollspy({
        				min: position.top,
        				max: position.top + $(this).height(),
        				onEnter: function(element, position) {
        						if(console) console.log('entering ' +  element.id);
        						$("body").css('background-color', element.id);
						  		$(".test-menu [id=" + element.id + "]").addClass('test-action');
        				},
        				onLeave: function(element, position) {
        						if(console) console.log('leaving ' +  element.id);
						        $(".test-menu [id=" + element.id + "]").removeClass('test-action');
        				                //$('body').css('background-color','#eee');
        				}
        		});
        });
});
93-E47685-12_spy

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Манипуляции с меню

Манипуляции с меню

Проводим различные эксперименты и манипуляции с меню. Добавить пункт функцией Добавляем произвольный пункт меню при помощи функции (!данный пример будет работать только с установленным плагином woocommerce) add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, Читать далее »

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

Пока нет комментариев. Будь первым!

Scrollspy jquery Scrollspy jquery
Технология акций на Woocommerce
Рекомендации для васТехнология акций на WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.