<main>Öğeyi doğrudan öğenin altına yerleştirmeye çalışıyorum aşağıdaki snippet (tam ekran modunda görüntülemek gerekir) var <header>. Ben <header>bunu içinde içerik yoluyla kullanıcı kaydırma ekranın üst kısmındaki almak istemeleridir sabit pozisyonda <main>eleman. Bildiğim her şeyi denedim, ancak gelebileceğim en iyi şey, <header>öğenin <main>içeriğinin büyük bir kısmını kesen öğenin üzerine yerleştirilmesidir .
Ortaya koyduğum en yakın çözüm, <main>öğenin üzerine tahmin edilen bir üst dolgu koymaktır <header>. Ancak, bu çözüm çeşitli ekran boyutlarını çok iyi hesaba katmaz, çünkü px yerine rem boyutlandırma kullanıyorum. Üst dolgu fikri, <header>göreceli veya yüzde tabanlı yükseklik kullanan birkaç öğeyi yerleştirirken daha da kötüleşir . Bir ekran boyutunda her şey mükemmel olabilir ve farklı bir ekran boyutunda içerik çok uzak olabilir.
Son olarak, üst dolguyu dinamik olarak ayarlamak için jQuery kullanabileceğimi biliyorum, ancak her zaman bu kadar iyi görünmüyor. Merak ediyorum saf bir css / html çözümü var.
Burada neyi kaçırdığımı söyleyen var mı? Üst dolgu yöntemim uygulanabilir tek çözüm mü?
$(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>
tam ekranda ana başlık altında ama mobil değil
—
Ayman Morsy
Bunun nedeni,
—
Austin
mainelemanın üzerine yerleştirilen dolgu üst kısmıdır . Clunky, ama biraz işe yarıyor. Daha iyi bir çözüm olup olmadığını merak ediyorum.
Bu sarı sınır devre dışı bıraktıktan sonra pic ne istediğinizden emin değilim ibb.co/bR0YykQ bir ekran çekimi yapabilir
—
Ayman Morsy
Örneğim canlı sürümümün basitleştirilmiş bir sürümüdür. Canlı sürümümde, öğemde
—
Austin
<header>hepsinin yüzde veya göreceli yükseklik kullanan birkaç esnek öğesi var. Bu, <main>elemana sabit bir üst ped eklemeyi neredeyse işe yaramaz hale getirir . <main>Eleman tek bir ekran boyutu üzerinde para cezası sıraya ve diğerinde yol kapalı olabilir. Görünüşe göre jQuery, <main>eleman üzerinde css üst ped yedeklemesine sahip tek çözümüm olabilir .
JS kullanmak yerine CSS
—
Arthur
position: sticky developer.mozilla.org/en-US/docs/Web/CSS/position ile denediniz mi?