Скрипт 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'); } }); }); });
