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. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Как видите, заголовок должен сопровождать прокрутку, но я не могу использовать фиксированную позицию... Моя проблема в том, что она работает отлично, НО полоса прокрутки при прокрутке оказывается ниже абсолютного элемента...
р>
Есть ли у вас идеи, как я могу это сделать?
Большое спасибо!
У меня проблема с абсолютной позицией 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. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Правда в том, что боль сама по себе очень важна, за ней последует увеличение числа людей, но это произойдет одновременно с каким-то большим трудом и болью. Если говорить до мельчайших подробностей, то никто не должен заниматься никакой работой, если не получит от нее какой-либо пользы. Не злиться на боль, на выговор, на удовольствие он хочет быть волоском от боли в надежде, что не будет размножения. Если они не ослеплены похотью, они не выйдут, виноваты те, кто оставляет свои обязанности и смягчает свои сердца, то есть труды.
Как видите, заголовок должен сопровождать прокрутку, но я не могу использовать фиксированную позицию... Моя проблема в том, что она работает отлично, НО полоса прокрутки при прокрутке оказывается ниже абсолютного элемента...
р>
Есть ли у вас идеи, как я могу это сделать?
Большое спасибо!
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Полоса прокрутки без фиксированной высоты/Динамическая высота с полосой прокрутки
Anonymous » » в форуме CSS - 0 Ответы
- 53 Просмотры
-
Последнее сообщение Anonymous
-