Показать сообщение отдельно
  #1 (permalink)  
Старый 05.06.2018, 22:17
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Не учитывать высоту выпадающего меню при скроле к якорю
Здравствуйте!
Новая проблема с прокруткой: В десктопной версии все работает хорошо. А в мобильной у меня меню отображается в виде раскрывающегося списка (гамбургер-меню) - проблема в том что при нажатии на ссылку в меню, само меню сворачивается обратно, но при прокрутке, насколько я понял, учитывается высота этого меню в раскрытом виде и все "уезжает" ниже якоря...
jQuery(document).ready(function($){

	$('.hamburger').click(function(){
		element = $('.mobile-menu');
	display = element.css('display');
	if(display == 'none')
		$('.mobile-menu').slideDown(400);
	if(display == 'block')
		$('.mobile-menu').slideUp(400);
});
 
$('.mobile-menu a').click(function(){
	$('.mobile-menu').slideUp(400);
});

    $('a.scroll').click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr('href')).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });
	

});


<div class="hamburger">
			<i class="icon-menu"></i>
		        </div>

	<div class="mobile-menu">
		<div class="container">
			<ul>
				<li><a href="#home" class="scroll">Home</a></li>
				<li><a href="#galleries" class="scroll">Galleries</a></li>
				<li><a href="#about" class="scroll">About</a></li>
				<li><a href="#info" class="scroll">Info</a></li>
				<li><a href="#press" class="scroll">Press</a></li>
				<li><a href="#contact" class="scroll">Contact</a></li>
				<li><a href="#" class="" target="_blank">Blog</a></li>
			</ul>
		</div>
	</div>

Последний раз редактировалось Igorsrt, 05.06.2018 в 22:26.
Ответить с цитированием