Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не учитывать высоту выпадающего меню при скроле к якорю (https://javascript.ru/forum/dom-window/74018-ne-uchityvat-vysotu-vypadayushhego-menyu-pri-skrole-k-yakoryu.html)

Igorsrt 05.06.2018 22:17

Не учитывать высоту выпадающего меню при скроле к якорю
 
Здравствуйте!
Новая проблема с прокруткой: В десктопной версии все работает хорошо. А в мобильной у меня меню отображается в виде раскрывающегося списка (гамбургер-меню) - проблема в том что при нажатии на ссылку в меню, само меню сворачивается обратно, но при прокрутке, насколько я понял, учитывается высота этого меню в раскрытом виде и все "уезжает" ниже якоря...
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 23:02

вот так вот сделал
jQuery(document).ready(function($){
h = 0;
	$('.hamburger').click(function(){
	h = $('.mobile-menu').height();
		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 - h + "px"
        }, {
            duration: 500
        });
        return false;
    });
	

});

не знаю, насколько правильно - но вроде бы работает на первый взгляд..

j0hnik 05.06.2018 23:12

Igorsrt,
при ресейзе в большую сторону криво будет.
лучше h добавлять тем же событием что и мобильное меню выкатывает.

Igorsrt 05.06.2018 23:30

Цитата:

Сообщение от j0hnik (Сообщение 486748)
Igorsrt,
при ресейзе в большую сторону криво будет.
лучше h добавлять тем же событием что и мобильное меню выкатывает.

а это как?... я если честно, не силен в js - все с помощью "метода тыка" да добрых советов

j0hnik 05.06.2018 23:32

нужно полный код глянуть страницы и скрипта


Часовой пояс GMT +3, время: 07:31.