Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Открытие ссылок с анкором. Хедер перекрывает контент (https://javascript.ru/forum/misc/75153-otkrytie-ssylok-s-ankorom-kheder-perekryvaet-kontent.html)

dmk 07.09.2018 13:24

Открытие ссылок с анкором. Хедер перекрывает контент
 
Есть одностраничный сайт на бутстрап с фиксированным навбаром - https://entera.pro
Меню плавно скролится по странице к анкорам, установлен сдвиг при скролле на высоту хедера.
Но если ссылку с анкором открывать не со страницы, а отдельно, тогда хедер перекрывает заголовок секции:
https://entera.pro/#id-advantages

Как сделать сдвиг для ссылок с анкором? Не ломая все остальное, потому что сдвиги уже есть для прокрутки из меню.

Есть куча кривых вариантов с отрицательными отступами и фиксированным контентом, а нормальный способ не нашел. Чтобы ровно было и одинаково для всех открываемых ссылок с анкорами, откначинающихся с id-

рони 07.09.2018 17:25

dmk,
jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
jQuery("a[href='"+hash+"']").click();
}
});

dmk 07.09.2018 20:16

Мне не нужен click(), у меня для скроллинга меню такая функция:
$( 'a.nav-link[href*="#id"]' ).click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: (target.offset().top - 50)
            }, 1000, "easeInOutExpo");
            return false;
        }
    }
});


Но при открытии прямой ссылки с анкором, заголовок секции оказывается под хедереом.

Пробовал разные чудаковатые варианты вроде этого:
var hash = window.location.hash;
    if( hash = '#id-advantages' ) {
        jQuery( 'div#id-advantages' ).css({
            'padding-top' : '400px'
        });
    };

Но отступ включается вообще всегда

Или я неправильно понял вашу функцию?

j0hnik 07.09.2018 20:23

dmk,
событие 'load' происходит при загрузке всех ресурсов, это как раз для прямого перехода.
добавить не пробовали?

рони 07.09.2018 20:32

Цитата:

Сообщение от dmk
Но отступ включается вообще всегда

Цитата:

Сообщение от dmk
if( hash = '#id-advantages' )

==

рони 07.09.2018 20:33

dmk,
код проверили из поста №2?

dmk 07.09.2018 20:35

Добавил, работает. Наверно раньше как-то криво добавлял, не работало. Только сейчас получается, что секция открывается закрытая хедером и через пару секунд заголовок выезжает из-под хедера. Можно отключить анимацию (если это она) для прямых переходов по анкору?

рони 07.09.2018 20:35

Цитата:

Сообщение от dmk
Мне не нужен click(),

нужен!!!

рони 07.09.2018 20:39

Цитата:

Сообщение от dmk
Можно отключить анимацию

можно но будет скачок, на форуме для данной проблемы, решения пока никем не предложено(только костыль типа клика по ссылке), если есть подскажите.

рони 07.09.2018 20:44

dmk,
без анимации
jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
window.scrollBy(0,-50)
}
});


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