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

Question

Я пытаюсь выяснить, как создать заголовок для веб-сайта, чтобы под заголовком находились вкладки (которые выглядят так, как будто они торчат из-под заголовка), которые остаются с заголовком в качестве страницыпрокручивается вниз (и заголовок перемещается вверх), но когда они достигают верхней части страницы, они фиксируются там так, что они всегда видны.

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

Что мне нужно, так это решение с использованием CSS и / или JavaScript.Кто-нибудь знает способ сделать это?

Answer 1

Реми Шарп , Левая логика и jQuery для дизайнеров предлагает учебное пособие по аналогичной -ish теме: фиксированная с плавающей элементы .

Это эмулирует корзину покупок из британского Apple Store (щелкните продукт, чтобы настроить его, и просмотрите поля с описанием / спецификацией при прокрутке страницы) охватывает практически все, что вам нужно знать, чтобы адаптируйте технику в соответствии со своими требованиями.

Очевидно, что из URL-адреса сайта он требует (или, по крайней мере, использует ) jQuery, а не простой Javascript.

Answer 2

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

<div id="fix" style="position:absolute;top:30px;">
My fixedish div
</div>

И несколько быстрых js (нужно почистить для работы в кросс-браузерном режиме):

// register event handler
window.addEventListner("scroll", function(){
    var div = document.getElementById("fix");  
    if (document.body.scrollHeight > 30) {
        // fix it to the top
        div.style.position = "fixed";
        div.style.top = "0px";
    }
    else {
        // position it below the header
        div.style.position = "absolute";
        div.style.top = "30px";
    }
});

Answer 3

См. SO вопрос и ответы

Answer 4

Шахта не работала, пока я не добавил этот "z-index: 999;"

Answer 5

Вы можете посмотреть на jQuery UI, в котором есть плагин для вкладок, и есть много примеров использования, которые вы можете найти после короткого поиска.

Answer 6

Я не думаю, что вы можете сделать это только с помощью css, как сказал SLaks. Даже если есть какой-то способ условных утверждений или хаков, о которых я не знаю, я бы не стал делать это по двум причинам:

• Это точно не будет работать со всеми браузерами.
• Это, конечно, не подходящий выбор (язык должен соответствовать проблеме).

Используя javascript, я бы предложил использовать onScroll и scrollHeight для обновления вкладок css, когда они находятся вверху страницы.