У меня есть следующий фрагмент (необходимо просмотреть в полноэкранном режиме), что я пытаюсь поместить <main>элемент непосредственно под <header>элементом. У меня <header>фиксированная позиция, потому что я хочу, чтобы она оставалась в верхней части экрана, когда пользователь прокручивает содержимое <main>элемента. Я перепробовал все, что знаю, но лучшее, что я могу придумать, это <header>поместить элемент поверх <main>элемента, что обрезает большую часть контента.
Самое близкое возможное решение, которое я придумал, - это наложение на <main>элемент предположительного верхнего отступа, чтобы он очистился <header>. Тем не менее, это решение не очень хорошо учитывает размеры экрана, так как я использую изменение размера вместо px. Идея верхнего отступа становится еще хуже, если поместить несколько элементов внутри, <header>которые используют относительную или процентную высоту. На одном размере экрана все может выровняться идеально, а на другом размере экрана содержание может быть далеко.
Наконец, я знаю, что могу использовать jQuery для динамического задания верхнего отступа, но это не всегда хорошо работает. Интересно, есть ли чистое решение CSS / HTML.
Кто-нибудь может сказать мне, что мне здесь не хватает? Является ли мой метод верхнего заполнения единственным приемлемым решением?
$(document).ready(function() {
$('#navToggle').click(function() {
$("div#bottom-container > nav").slideToggle();
});
$(window).resize(function() {
if(window.innerWidth >= "751") {
$("header > div#bottom-container > nav").show();
}else {
$("header > div#bottom-container > nav").hide();
}
});
$("header > div#bottom-container > nav > ul > li > a").click(function(e) {
if (window.innerWidth <= "750") {
if ($(this).siblings().size() > 0) {
e.preventDefault();
$(this).siblings().slideToggle("slow");
}
}
});
$("header > div#bottom-container > nav > ul > li").hover(function() {
if (window.innerWidth >= "751") {
if ($(this).children("nav").size() > 0) {
$(this).children("nav").stop().show();
}
}
},function(){
if (window.innerWidth >= "751") {
if ($(this).children("nav").size() > 0) {
$(this).children("nav").hide();
}
}
});
});* {
margin: 0;
}
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
}
}
body {
background: #eee;
font-family: "HelveticaNeue-Light", Arial;
height: auto !important;
}
#head-wrap{
margin: 0 auto;
position: relative;
width:100%;
}
#second-wrap{
position: fixed;
width:100%;
z-index:999;
}
main{
height:4000px;
position:relative;
padding-top:13rem;
}
header{
position: absolute;
top:0;
left:0;
width:100%;
overflow-x: hidden;
overflow-y: auto;
height:200rem;
}
#navToggle {
background-color: rgba(0, 0, 0, .15);
position: relative;
right: 0;
top: 0;
z-index:999;
height: 2.6rem;
}
#navToggle>a {
color: rgba(255, 255, 255, .85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: all 300ms ease;
padding-top:.9rem;
}
#bottom-container {
display: flex;
flex-direction: column;
text-align: center;
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}
#bottom-container>nav {
background-color: rgb(250, 209, 14);
display: none;
flex: 1;
}
#bottom-container nav>ul {
list-style-type: none;
}
#bottom-container nav>ul>li {
position: relative;
}
#bottom-container nav>ul>li>a {
display: block;
color: rgba(0, 0, 0, .65);
padding: 1.3rem 0;
text-decoration: none;
}
#bottom-container nav>ul>li>a span.toggle {
background-color: rgba(0, 0, 0, .05);
color: rgba(0, 0, 0, .25);
padding: 2px 8px;
}
#bottom-container>nav>ul>li>nav {
display: none;
overflow: hidden;
position: absolute;
top:100%;
right: 5%;
width: 90%;
z-index: 100;
background-color: rgb(250, 250, 250);
margin-bottom:10rem;
}
header>nav>ul>li>nav>ul>li>a {
color: rgba(255, 255, 255, .85);
}
/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
//// THIS IS THE ONLY FIX I KNOW OF //////////
*/
main{
padding-top:5rem;
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/
/* Medium screens */
@media all and (min-width: 751px) {
header{
overflow-y:visible;
overflow-x:visible;
padding-bottom:0;
}
#navToggle {
display: none;
}
#bottom-container {
background-color: rgb(250, 209, 14);
width: 100%;
border-top: calc(5vh + 2vw) solid yellow;
}
#bottom-container>nav {
display: block;
}
#bottom-container>nav>ul {
display: flex;
justify-content: center;
flex-direction: row;
height: 3rem;
}
#bottom-container nav>ul>li {
position: static;
flex:1;
display: flex;
justify-content: center;
align-items: center;
}
#bottom-container nav>ul>li>a {
padding: 0;
}
#bottom-container nav>ul>li>a span.toggle {
display: none;
}
#bottom-container >nav>ul>li>nav>ul>li{
line-height: 2.5rem;
}
#bottom-container>nav>ul>li>nav {
margin-top:-194.5rem;
}
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="head-wrap">
<div id="second-wrap">
<header>
<div id="navToggle"><a href="#">Menu</a></div>
<div id='bottom-container'>
<nav>
<ul>
<li><a href="#">ITEM ONE</a></li>
<li class="sub1">
<a href="#">ITEM TWO <span class="toggle">Expand</span></a>
<nav>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</nav>
<li><a href="#">ITEM THREE</a></li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<main>
<p>content top not visible but should be able to see</P>
<p>line 1</P>
<p>line 2</P>
<p>line 3</P>
<p>line 4</P>
<p>line 5</P>
<p>line 6</P>
<p>line 7</P>
<p>line 8</P>
<p>line 9</P>
<p>line 10</P>
<p>line 11</P>
<p>line 12</P>
<p>line 13</P>
<p>line 14</P>
<p>line 15</P>
<p>line 16</P>
<p>line 17</P>
<p>line 18</P>
<p>line 19</P>
<p>line 20</P>
</main>
</body>
</html>источник
mainэлемент помещен верхний слой. Неуклюжий, но это отчасти работает. Хотите знать, если есть лучшее решение.<header>элементе есть несколько flex-элементов, которые используют либо процентную, либо относительную высоту. Это делает добавление фиксированной верхней панели к<main>элементу практически бесполезным.<main>Элемент может выстраиваться штраф на один размер экрана и быть поодаль на другой. Похоже, что jQuery может быть моим единственным решением здесь с резервной копией css top pad для<main>элемента.position: stickydeveloper.mozilla.org/en-US/docs/Web/CSS/position вместо использования JS?Ответы:
Я сделал тот же результат (поправьте меня, если я ошибаюсь), но без JS. И кажется, что любая высота заголовка считается содержанием ниже.
Основная идея - не завернуть
<header>и применить к немуposition: sticky,z-indexтоже не надо.Я не использовал точно ваш код, но попытался повторить результат. Надеюсь, вы найдете полезные идеи для вашей проблемы.
Код некоторых ответов, когда ширина экрана мала и переключает меню, отталкивает основное содержание. Мой код не содержит этой проблемы.
источник
Удалите первые два верхних контейнера div элемента header, так как нет необходимости переносить заголовок. Элемент заголовка уже является контейнером.
Пожалуйста, удалите
height:200rem;в стиле заголовка иpadding-top: 13rem or 5remдля стиля основного элемента.Наконец, пожалуйста, измените свойство позиции стиля заголовка на sticky вместо
absoluteи добавьте z-index.Ниже я протестировал его и обновил кодовую базу.
источник
Это своего рода грубый взлом, но вы можете создать второй заголовок, который прячется за реальным, который остается в потоке документов и выталкивает вниз
<main>.Просто продублируйте элементы, которые составляют заголовок, дайте им понижение
z-indexи переключите егоposition: fixedнаposition: relative. Тогда просто избавьтесь от высоты скрытого<header>элемента и удалитеpadding-topиз<main>.Редактировать: я не знаю, почему я не думал об этом раньше. Просто установите
#headwrapи<main>чтобыposition: relative. Затем снимитеheightна<main>и набор<body>дляdisplay: flexиflex-direction: column. Наконец, заверните содержимое<main>в<div>.Здесь я установил высоту div в 4000px, чтобы продемонстрировать прокрутку.
источник
источник
media-quiresплохо, я могу настроить отступ, теперь он работает нормально, пожалуйста, проверьте и сообщите мнеВы не ищете положение: липкое; верх: 0; ? Вы хотите иметь меню, которое следует за пользователем, когда он прокручивает правильно? Затем попробуйте изменить # bottom-container на:
И я думаю это все. Но одно точно - вам нужно переосмыслить то, как вы создали всю эту структуру, потому что это чертовски грязно. Вы можете получить те же результаты с:
HTML:
style.css:
И нет JS, потому что, если вы не должны его использовать. Надеюсь, это поможет.
источник
Я могу предложить вам Vanilla-JavaScript вместо jQuery ...
Попробуйте получить размер «заголовка» при загрузке страницы (событие onload) и добавить его в дополнение к «main»:
Чтобы работать, я дал "id" элементам "header" и "main":
источник