Mam następujący fragment kodu (muszę wyświetlić w trybie pełnoekranowym), że próbuję umieścić <main>
element bezpośrednio pod <header>
elementem. Mam <header>
stałą pozycję, ponieważ chcę, aby pozostała na górze ekranu, gdy użytkownik przewija zawartość <main>
elementu. Próbowałem wszystkiego, co wiem, ale najlepsze, co mogę wymyślić, to <header>
umieścić element na wierzchu <main>
elementu, co odcina dużą część zawartości.
Najbliższym możliwym rozwiązaniem, jakie wymyśliłem, jest nałożenie na <main>
element górnego wypełnienia, aby mógł on wyczyścić <header>
. Jednak to rozwiązanie nie uwzględnia zbyt dobrze różnych rozmiarów ekranów, ponieważ używam rozmiaru rem zamiast px. Pomysł na najlepsze wypełnienie staje się jeszcze gorszy, gdy umieszcza się kilka elementów wewnątrz, <header>
które wykorzystują względną lub procentową wysokość. Na jednym ekranie wszystko może być idealnie dopasowane, a na innym ekranie zawartość może być daleka.
Wreszcie wiem, że mogę użyć jQuery do dynamicznego ustawiania górnego dopełnienia, ale nie zawsze wydaje się to działać dobrze. Zastanawiasz się, czy istnieje czyste rozwiązanie css / html.
Czy ktoś może mi powiedzieć, czego tu brakuje? Czy moja najlepsza metoda wypełniania jest jedynym wykonalnym rozwiązaniem?
$(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>
źródło
main
elemencie wyściółki . Clunky, ale to działa. Zastanawiasz się, czy istnieje lepsze rozwiązanie.<header>
elemencie jest kilka elementów elastycznych, z których wszystkie używają wysokości procentowej lub względnej. To sprawia, że dodanie stałej górnej podkładki do<main>
elementu jest prawie bezużyteczne.<main>
Element może wyrównać grzywny w jednym rozmiarze ekranu i być daleko od drugiego. Wygląda na to, że jQuery może być moim jedynym rozwiązaniem tutaj z kopią zapasową css top pad na<main>
elemencie.position: sticky
developer.mozilla.org/en-US/docs/Web/CSS/position zamiast JS?Odpowiedzi:
Zrobiłem ten sam wynik (popraw mnie, jeśli się mylę), ale bez JS. I wygląda na to, że niezależnie od wysokości nagłówka rozważana jest treść poniżej.
Główny pomysł - nie owijać
<header>
i nie stosowaćposition: sticky
,z-index
również nie jest to konieczne.Nie użyłem dokładnie twojego kodu, ale próbowałem powtórzyć wynik. Mam nadzieję, że znajdziesz kilka przydatnych pomysłów na swój problem.
Kod niektórych odpowiedzi, gdy szerokość ekranu jest mała i przełącza menu, przesuwa główną zawartość w dół. Mój kod nie zawiera tego problemu.
źródło
Proszę usunąć pierwsze dwa górne pojemniki div elementu nagłówka, ponieważ nie ma potrzeby zawijania nagłówka. element nagłówka jest już kontenerem.
Usuń
height:200rem;
w stylu nagłówka i stylupadding-top: 13rem or 5rem
głównego elementu.Na koniec zaktualizuj właściwość position stylu nagłówka do sticky zamiast
absolute
i dodaj indeks Z.Poniżej przetestowałem go i zaktualizowałem bazę kodu.
źródło
Jest to rodzaj szorstkiego włamania, ale możesz utworzyć drugi nagłówek, który ukrywa się za prawdziwym, który pozostaje w obiegu dokumentów i przesuwa w dół
<main>
.Wystarczy zduplikować elementy, które składają się na nagłówek, obniżyć je
z-index
i przełączyć zposition: fixed
naposition: relative
. Następnie wystarczy pozbyć wysokości ukrytego<header>
elementu i usunąćpadding-top
z<main>
.Edycja: Nie wiem, dlaczego wcześniej o tym nie myślałem. Wystarczy ustawić
#headwrap
i<main>
doposition: relative
. Następnie usuńheight
włączony<main>
i ustaw<body>
nadisplay: flex
iflex-direction: column
. Na koniec zawiń zawartość<main>
w<div>
.Tutaj ustawiłem wysokość div na 4000px, aby zademonstrować przewijanie.
źródło
źródło
media-quires
źle udało mi się dostosować dopełnienie teraz działa dobrze proszę sprawdzić i daj mi znaćnie szukasz pozycji: lepka; góra: 0; ? Chcesz mieć menu, które śledzi użytkownika, gdy przewija w prawo? Następnie spróbuj zmienić # kontener dolny na:
I myślę, że to tyle. Ale jedno jest pewne - musisz przemyśleć sposób, w jaki stworzyłeś całą tę strukturę, ponieważ jest bałaganiarski. Możesz uzyskać te same wyniki dzięki:
HTML:
style.css:
I nie ma JS, ponieważ nie musisz go nie używać. Mam nadzieję, że to pomoże.
źródło
Mogę zaoferować ci Vanilla-JavaScript zamiast jQuery…
Spróbuj uzyskać rozmiar „nagłówka” podczas ładowania strony (zdarzenie onload) i dodaj go do dopełniania „głównego”:
Inorder to work Podałem „id” do „nagłówka” i „głównych” elementów:
źródło