Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2018, 13:24
Аватар для dmk
dmk dmk вне форума
Интересующийся
Отправить личное сообщение для dmk Посмотреть профиль Найти все сообщения от dmk
 
Регистрация: 21.03.2015
Сообщений: 13

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

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

Есть куча кривых вариантов с отрицательными отступами и фиксированным контентом, а нормальный способ не нашел. Чтобы ровно было и одинаково для всех открываемых ссылок с анкорами, откначинающихся с id-
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2018, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

dmk,
jQuery(window).on('load', function() {
var hash = document.location.hash;
if(hash!=''){
jQuery("a[href='"+hash+"']").click();
}
});
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2018, 20:16
Аватар для dmk
dmk dmk вне форума
Интересующийся
Отправить личное сообщение для dmk Посмотреть профиль Найти все сообщения от dmk
 
Регистрация: 21.03.2015
Сообщений: 13

Мне не нужен 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'
        });
    };

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

Или я неправильно понял вашу функцию?
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2018, 20:23
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

dmk,
событие 'load' происходит при загрузке всех ресурсов, это как раз для прямого перехода.
добавить не пробовали?
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2018, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от dmk
Но отступ включается вообще всегда
Сообщение от dmk
if( hash = '#id-advantages' )
==
Ответить с цитированием
  #6 (permalink)  
Старый 07.09.2018, 20:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

dmk,
код проверили из поста №2?
Ответить с цитированием
  #7 (permalink)  
Старый 07.09.2018, 20:35
Аватар для dmk
dmk dmk вне форума
Интересующийся
Отправить личное сообщение для dmk Посмотреть профиль Найти все сообщения от dmk
 
Регистрация: 21.03.2015
Сообщений: 13

Добавил, работает. Наверно раньше как-то криво добавлял, не работало. Только сейчас получается, что секция открывается закрытая хедером и через пару секунд заголовок выезжает из-под хедера. Можно отключить анимацию (если это она) для прямых переходов по анкору?
Ответить с цитированием
  #8 (permalink)  
Старый 07.09.2018, 20:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от dmk
Мне не нужен click(),
нужен!!!
Ответить с цитированием
  #9 (permalink)  
Старый 07.09.2018, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от dmk
Можно отключить анимацию
можно но будет скачок, на форуме для данной проблемы, решения пока никем не предложено(только костыль типа клика по ссылке), если есть подскажите.
Ответить с цитированием
  #10 (permalink)  
Старый 07.09.2018, 20:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие ссылок из select в iframe Feex Элементы интерфейса 4 01.01.2016 17:39
Открытие ссылок в новом окне serega1976 Events/DOM/Window 7 01.01.2016 14:36
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41
slideToggle (поочередное открытие ссылок со скрытым текстом) Luna82 Элементы интерфейса 6 05.06.2011 11:50
FancyBox, открытие двух ссылок dots_rei Общие вопросы Javascript 2 08.08.2009 00:47