Как сделать скролл до якоря с учётом высоты фиксированного Bootstrap меню?

Question

[Иван Смирнов]

Доброго времени суток!

Имеется стандартное меню Bootstrap, но с резиновой(vw) высотой более 50px, заказчик попросил, чтобы меню фиксировалось при прокрутке и доходило стык в стык с якорным блоком, знакомая дала скрипт

Скрипт

$('a[data-target^="anchor"]').bind('click.smoothscroll', function(){
var target = $(this).attr('href'),
bl_top = $(target).offset().top - ($('.navbar-header').height());
$('body, html').animate({scrollTop: bl_top}, 700);
return false;
});

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

P.S. А также я пытаюсь понять как закрывать меню в мобильной версии при нажатии на любую из ссылок, нашёл скрипт, но он не работает

Скрипт

$('aria-expanded').on('click', function () {
$('#navbar-collapse').removeClass('in');
$a = $($(this).attr('href'));
$('html,body').animate({ scrollTop: $a.offset().top});
return false;
});

Answer 1

[Vlad Feninets]

попробуйте высчитать innerHeight / outerHeight хедера вместо height

Answer 2

[ihutornoy]

Через инспектор элементов посмотрите высоту элемента, к которому задан якорь для скролла. Там должна быть нормальная высота, которая никуда "не плывет".

По поводу закрытия мобильного меню после клика попробуйте мой:

$(function () {
    $('.mobile_menu').on('click', function () {
        if ($('.toggle_menu').css('display') != 'none') {
            $(".toggle_menu").trigger("click");
        }
    });
});

Comments

[Иван Смирнов]

Напоминаю, что у меня Bootstrap меню, и ваш скрипт не работает.

[ihutornoy]

Замените мои классы в скрипте на свои.

[Иван Смирнов]

ihutornoy: Менял, не работает(