Липкий заголовок и внутренние ссылки

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

Любые предложения по решению этой проблемы?

CSS

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5em;
    padding:0;
    margin: 0;
}

#container {
    width: 100%;
    margin: 3.5em 0 0 0;
    padding: 0;
    overflow:auto;
}

#content {
    padding: 0 4em;
    margin: 0;
}

HTML:

<body>

    <div id="header">
        <div id="content">
            <p>
                <a href="#xyz">XYZ</a>
            </p>
        </div> <!--end content-->
    </div> <!--end header-->

    <div id="container">
        <div id="content">
            <p>A lot of text.</p>
            <a name="xyz"></a>
            <p>A lot of text</p>
        </div><!--end content-->
    </div><!--end container-->

</body>

Ответ 1

Сначала лучше использовать блоки с id вместо name - это более стандартный способ.

Затем добавьте класс к якорю, а затем сделайте его абсолютным положением + переместите его с отрицательным верхним margin равным высоте заголовка.

Посмотрите на эту скрипту: http://jsfiddle.net/kizu/gfXJJ/

Или, альтернативно, для браузеров, поддерживающих псевдоэлементы, вы можете добавить один с нужной высотой и компенсировать ее высоту с помощью отрицательного верхнего поля, поэтому она будет равна началу блока, к которому вы бы сделали ссылку, Таким образом, вы можете добавить id к уже существующим элементам, а не создавать дополнительные.

Вот версия с псевдоэлементом: http://jsfiddle.net/kizu/gfXJJ/2/

Или вы можете добавить top padding и отрицательный margin к элементу с самим id: http://jsfiddle.net/kizu/gfXJJ/2/ - но в в этом случае могут возникнуть проблемы с фоном, потому что блок физически расширен в верхней части.

Ответ 2

Немного javascript (jQuery, используемый здесь) может сделать это:

$('#header a').click(function (e) {
  e.preventDefault();

  var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset();

  $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast');
});

Это находит элемент с атрибутом name, который соответствует атрибуту href щелкнутой ссылки, а затем анимирует прокрутку к этой позиции элемента, за исключением высоты заголовка.

http://jsfiddle.net/blineberry/bTa8b/

Ответ 3

Я считаю, что этот вопрос перекрывает тот, который указан в этой ссылке: компенсирует привязку html для настройки фиксированного заголовка, который предлагает еще более возможные решения. Я считаю, что вопросы могут быть объединены, но у меня нет таких привилегий. (По той же причине я вхожу в это как ответ, хотя знаю, что это должен был быть комментарий. Но мне не разрешено комментировать.)

Ответ 4

Одна простая вещь - поместить <a name="xyz"></a> чуть выше текста.

Это потребует некоторых проб и ошибок, но это может быть самая быстрая/легкая вещь.

Еще одна вещь, которую вы можете сделать - динамически добавлять margin или padding при нажатии ссылки.

Ответ 5

Вы также можете установить верхний край с высоким липким заголовком для вашего xyz-фрагмента в вашем файле CSS. Это может привести к пустому пробелу в HTML-странице вашего результата, хотя...

Ответ 6

Начните с получения уникального идентификатора для части контента в заголовке и внутри контейнера. Возможно, вы можете поместить ul внутри заголовка для внутренних ссылок. Установите положение содержимого внутри обертки absolute, et voila!

Есть ли место, где мы можем взглянуть на вашу проблему?

Ответ 7

Псевдоэлементы не работают во всех сценариях. Мне повезло, что я применил отрицательный верхний край и положительное верхнее дополнение для компенсации отрицательного поля.

например. <a id="xyz" style="margin-top:-50px; padding-top:50px">Title</a>