Исправлен заголовок страницы и встроенные якоря против Tripit Slate.

Question

Этот вопрос касается получения хэшированных URL (например, mydomain.com/somepage#SomeAnchor) для прокрутки из-под фиксированного заголовка страницы, когда эти URL-адреса являются целями перехода. Это ответ на этот вопрос - но мне интересно, получил ли кто-нибудь свои ответы для полноценной работы над платформой публикации документов на Tripit Slate?

Этот Slate-based сайт не наш, но он показывает наше затруднительное положение:

• Если щелкнуть ссылку в левой навигационной панели, центральный текстовый столбец прокручивается до выбранного заголовка. Все хорошо.

• Но попробуйте нажать на ссылку в тексте. Например, с http://buddycloud.com/api, нажмите push notification ссылка на сайт. Вы прокручиваете до совершенно другого подзаголовка. Запрошенная вами цель на самом деле имеет фокус, но она скрыта под верхней панелью навигации. (Прокрутите вверх, и вы увидите это.)

Наши левые навигационные ссылки работают чисто, как и на сайте buddycloud. Благодаря ответу Sidnicious' 4086107 мы поместили невидимый псевдоэлемент над всеми нашими заголовками, как это было разработано Николасом Галлахером. Вот класс CSS:

.jumptarget::before {
  content:"";
  display:block;
  height:85px; /* fixed header height*/
  margin:-85px 0 0; /* negative fixed header height */
}

И вот как мы применяем это к нашим заголовкам:

## <span class="jumptarget" id="SomeAnchorName"> SomeHeading </span>

Что хорошо работает для левой навигационной панели. Из css-трюков мы узнали, почему он все же не работает для хэшированных ссылок на странице:

Когда ссылка содержит хэш, например: <a href="#section-two">Section Two</a>... окно браузера будет прокручиваться... до минимально возможного положения, чтобы сделать этот элемент полностью видимым.... заподлицо с верхним краем окна браузера. Это может быть... в случае заголовка с фиксированной позицией, оставшегося сверху, очень проблематично.

Действительно, наша навигация с фиксированным верхом очень похожа на buddycloud (наша высота 82 px). И наши хеш-ссылки внутри страницы прячутся под ним, как и их.

С двумя важными исключениями: во-первых, в тех случаях, когда целевой "хэшированный" URL-адрес находится в том же файле уценки, что и исходящая ссылка, цель чисто подсматривает из-под фиксированного заголовка, как это делают ссылки левой навигационной панели. (На стороне источника Slate хранит весь контент как .md файлы.) Это локализует проблему: ссылки цели скрываются только там, где Slate должен пройти к отдельной цели .md файл, а затем объединить #<SomeAnchorName> завершить URL.

Во-вторых, мы нашли хак, который получает все хешированные ссылки внутри страницы, чтобы очистить наш верхний заголовок. Это включает в себя двойные теги наших заголовков в HTML, используя два диапазона. Первый - это пустой фиктивный диапазон, который располагается над фактическим текстом заголовка, чтобы обмануть поведение прокрутки. (Это с нашим выше jumptarget class.) В самом заголовке мы применяем отдельный span с классом, который исправляет левый отступ от первого хака. Двойная метка выглядит так:

<h2>
    <span class="jumptarget" id="bogusN"> &nbsp; </span>
    <span class="jumpleft"> Bogus Heading 2 </span>
</h2>

Но хотя это показывает наши хешированные ссылки на странице, оно полностью ломает нашу левую навигацию. Из-за некоторого взаимодействия с Сланца tocify левый навигационный генератор, любые заголовки, помеченные таким образом, ведут себя неправильно: (1) Скрыть своих детей в левой навигационной панели. (2) При нажатии, предотвратить jumptarget класс от прокрутки их из-под верхнего заголовка. (3) При нажатии сверните родительский элемент в левой навигационной панели.

В общем, наша дилемма заключается в следующем: наше исправление для ссылок с левой навигационной панели оставляет наши текстовые ссылки неработоспособными. Принимая во внимание, что наше исправление для текстовых ссылок ломает наше исправление левой навигационной системы.

Если кто-нибудь в мире решил это на Tripit Slate, или tocify или другая структура, мы были бы очень благодарны за указатели. Чистый CSS, хакерский HTML или простой JavaScript - мы агностики. Спасибо!

[Обновление от 13.07.16:] Вот скрипт, к которому наш разработчик добавил layout.erb, чтобы очистить целевые объекты ссылок от постоянного заголовка. Мы проверяем, работает ли он для всех ссылок. Комментарии очень приветствуются:

<script>
    var container = $('.page-wrapper .content');
    var body = $('body');
    var headerHeightPixels = 85;

    container.on('click', function(event) {
        var target = $(event.target);

        if (target.is('a') && target.attr('href').charAt(0) === '#') {
            setTimeout(function() {
                $('body').scrollTop($('body').scrollTop() - headerHeightPixels)
            }, 0);
        }
    });
</script>

Answer 1

У Tocify есть параметры, которые можно установить, которые будут контролировать интервал в верхней части области прокрутки, когда вы нажимаете на ссылку с левой панели (панель ToC, которая создается tocify.js). Это задокументировано здесь и контролируется с помощью клавиши scrollTo в tocify json. Но это только контролирует расположение области прокрутки для левой колонки.

Хотя вы можете добавить ту же логику, что и в tocify, чтобы "настроить" прокрутку для ссылок в центральной панели так же, как это делает tocify. Для нашего использования мы выбрали другой подход - мы прокручиваем верхний верхний колонтитул страницы, когда пользователь начинает перемещаться по грифельному документу. Нашим основанием для этого является то, что, как только пользователь начинает прокручивать длинный грифельный документ, он использует его в гневе, и мы хотим предоставить ему как можно больше недвижимости, чтобы получить как можно больше актуальной информации. Когда мы посмотрели на заголовок, он предоставил много контекста сайта и не имел ничего общего с читаемым документом. Таким образом, но с плавающим верхним заголовком, читатель получает больше недвижимости и всегда может вернуться к нему, прокрутив вверх.