CSS – абсолютное положение над полосой прокруткиCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Гость
 CSS – абсолютное положение над полосой прокрутки

Сообщение Гость »


У меня проблема с абсолютной позицией CSS, когда элемент находится над полосой прокрутки...

Это мой код:

document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.onscroll = e => h1.classList.toggle("static", overflow.scrollTop > h1.offsetTop) }) body { семейство шрифтов: Arial; } #приложение { высота: 80вх; ширина: 80мм; маржа: 10vh авто; положение: относительное; } #переполнение { переполнение: авто; высота: 100%; } #заголовок приложения { фон: светло-голубой; отступ: 1рем; } #заголовок приложения h1, #заголовок приложения h2, #заголовок приложения p { маржа: 0; } #app header h1.static { позиция: абсолютная; верх: 0; слева: 0; фон: светло-голубой; отступ: 1рем; ширина: 100%; размер коробки: граница-коробка; } #app основное { отступ: 1рем; Подзаголовок Основное название Дополнительный текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.

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

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

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

Как видите, заголовок должен сопровождать прокрутку, но я не могу использовать фиксированную позицию... Моя проблема в том, что она работает отлично, НО полоса прокрутки при прокрутке оказывается ниже абсолютного элемента...
р>
Есть ли у вас идеи, как я могу это сделать?

Большое спасибо!
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • CSS – абсолютное положение над полосой прокрутки
    Anonymous » » в форуме CSS
    0 Ответы
    80 Просмотры
    Последнее сообщение Anonymous
  • Полоса прокрутки без фиксированной высоты/Динамическая высота с полосой прокрутки
    Anonymous » » в форуме CSS
    0 Ответы
    53 Просмотры
    Последнее сообщение Anonymous
  • CSS: анимация с полосой прокрутки?
    Anonymous » » в форуме CSS
    0 Ответы
    17 Просмотры
    Последнее сообщение Anonymous
  • CSS: анимация с полосой прокрутки?
    Anonymous » » в форуме CSS
    0 Ответы
    11 Просмотры
    Последнее сообщение Anonymous
  • Проблема с полосой прокрутки раскрывающегося меню начальной загрузки со свойством радиуса границы
    Гость » » в форуме CSS
    0 Ответы
    101 Просмотры
    Последнее сообщение Гость

Вернуться в «CSS»