Статус:
Offline
Реєстрація: 20.07.2009
Повідом.: 1134
Реєстрація: 20.07.2009
Повідом.: 1134
Как объединить эти 2 скрипта
Есть 2 скрипта, первый для выделения пунктов меню при скролле страницы, а второй для плавного скролллинга.
Нужно их как то объединить, так как не совсем корректно работают, по отдельности так сказать.
Цель - чтобы и при перемотке и при переходе по ссылкам меню выделялись соответствующие пункты меню.
Подскажите пожалуйста как решить проблему?
Вот что есть на данный момент
Есть 2 скрипта, первый для выделения пунктов меню при скролле страницы, а второй для плавного скролллинга.
Нужно их как то объединить, так как не совсем корректно работают, по отдельности так сказать.
Цель - чтобы и при перемотке и при переходе по ссылкам меню выделялись соответствующие пункты меню.
Подскажите пожалуйста как решить проблему?
Вот что есть на данный момент
Код:
jQuery(function ($) {
$(window).scroll(function(){
$(".div").each(function () {
var window_top = $(window).scrollTop();
var div_top = $(this).offset().top;
var div_1 = $(this).attr('id');
if (window_top > div_top - 120){
$('#menu').find('li').removeClass('active');
$('#menu').find('li[class="'+div_1+'"]').addClass('active');
}
else{
$('#menu').find('li[class="'+div_1+'"]').removeClass('active');
};
});
});
});
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
//отменяем стандартную обработку нажатия по ссылке
event.preventDefault();
//забираем идентификатор бока с атрибута href
var id = $(this).attr('href'),
//узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
//анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 1500);
$('#menu').find('li[class="'+div_1+'"]').removeClass('active');
});
});
HTML:
<div class="navbar-collapse collapse" id="menu">
<ul class="nav navbar-nav navbar-right" id="top-menu">
<li class="headerwrap active"> <a href="#headerwrap">ВПЕРЕД</a></li>
<li class="about"> <a href="#about"> 1</a></li>
<li class="services"> <a href="#services"> 2</a></li>
<li class="portfolio"> <a href="#portfolio"> 3</a></li>
<li class="team"> <a href="#team"> 4</a></li>
<li class="price"> <a href="#price">5</a></li>
<li class="doc"> <a href="#doc"> 6</a></li>
<li class="contact"> <a href="#contact">7</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- ==== HEADERWRAP ==== -->
<div id="headerwrap" name="home" class="div">
