การวางตำแหน่งเนื้อหาที่เลื่อนได้ภายใต้เมนูการนำทาง flexbox คงที่

15

ฉันมีดังต่อไปนี้ข้อมูลโค้ด (จำเป็นที่จะต้องดูในโหมดเต็มหน้าจอ) ที่ฉันพยายามที่จะวาง<main>องค์ประกอบโดยตรงภายใต้<header>องค์ประกอบ ฉัน<header>อยู่ในตำแหน่งคงที่เพราะฉันต้องการให้อยู่ด้านบนของหน้าจอในขณะที่ผู้ใช้เลื่อนดูเนื้อหาใน<main>องค์ประกอบ ฉันได้ลองทุกอย่างที่ฉันรู้แล้ว แต่สิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือการ<header>วางองค์ประกอบไว้บน<main>องค์ประกอบซึ่งตัดเนื้อหาอันใหญ่ออกไป

วิธีการแก้ปัญหาที่เป็นไปได้ใกล้เคียงที่สุดที่ฉันได้มาด้วยการวางด้านบน padding guesstimated ในองค์ประกอบจึงจะล้าง<main> <header>อย่างไรก็ตามวิธีนี้ไม่ได้คำนึงถึงขนาดหน้าจอที่หลากหลายเนื่องจากฉันใช้การปรับขนาด rem แทน 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>
ขยายตัวอย่างข้อมูล

html  css  css-position  fixed 
— ออสติน
แหล่งที่มา
แบบเต็มหน้าจอหลักอยู่ใต้ส่วนหัว แต่ไม่ใช่ในมือถือ
— Ayman Morsy
นั่นเป็นเพราะช่องว่างภายในวางบนmainองค์ประกอบ อุ้ยอ้าย แต่ก็เป็นงาน สงสัยว่าถ้ามีทางออกที่ดีกว่า
— ออสติน
ฉันไม่แน่ใจว่าสิ่งที่คุณต้องการรูปนี้หลังจากปิดการใช้งานเส้นขอบสีเหลืองibb.co/bR0YykQคุณสามารถถ่ายภาพหน้าจอได้ไหม
— Ayman Morsy
ตัวอย่างของฉันเป็นเวอร์ชันที่เรียบง่ายของเวอร์ชันสดของฉัน ในรุ่นสดของฉันมีองค์ประกอบที่ยืดหยุ่นหลายอย่างในองค์ประกอบของฉัน<header>ที่ทั้งหมดใช้เปอร์เซ็นต์หรือความสูงสัมพัทธ์ สิ่งนี้ทำให้การเพิ่มแผ่นด้านบนคงที่ใน<main>องค์ประกอบนั้นแทบจะไร้ประโยชน์ <main>องค์ประกอบอาจปรับสายขึ้นอยู่กับขนาดหน้าจอเดียวและจะมีวิธีปิดในวันอื่น ดูเหมือนว่า jQuery อาจเป็นทางออกเดียวของฉันที่นี่ด้วย css แผ่นรองบน<main>องค์ประกอบ
— ออสติน
คุณลองกับ CSS position: sticky developer.mozilla.org/en-US/docs/Web/CSS/positionแทนที่จะใช้ JS หรือไม่
— อาเธอร์

คำตอบ:

1

ฉันได้ผลเหมือนกัน (แก้ไขฉันถ้าฉันผิด) แต่ไม่มี js และดูเหมือนว่าเนื้อหาส่วนสูงใด ๆ ที่พิจารณาจากด้านล่าง

แนวคิดหลัก - ไม่ห่อ<header>และนำไปใช้กับมันposition: sticky, z-indexยังไม่จำเป็น

ฉันไม่ได้ใช้รหัสของคุณอย่างแน่นอน แต่พยายามทำซ้ำผลลัพธ์ หวังว่าคุณจะพบแนวคิดที่เป็นประโยชน์สำหรับปัญหาของคุณ

รหัสคำตอบบางอย่างเมื่อความกว้างของหน้าจอมีขนาดเล็กและสลับเมนูมันจะดันเนื้อหาหลักลง รหัสของฉันไม่มีปัญหานั้น

* {
    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;
 }

header {
    width: 100%;
    position: sticky;
    top: 0;
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

.wrapper {
    position: relative;
    background-color: rgba(0, 0, 0, .15);
}

#navToggle {
    display: inline-block;
    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;
}

#navToggle:hover + #bottom-container, #bottom-container:hover  {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
}

#bottom-container > nav  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#bottom-container > nav > ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

#bottom-container > nav > ul li {
    display: flex;
    justify-content: center;
    width: 100%;

}

#bottom-container nav > ul > li > a {
    display: block;
    color: rgba(0, 0, 0, .65);
    padding: 1.3rem 0;
    text-decoration: none;
}

.sub1 {
    position: relative;
}

.sub1 > nav {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    background-color: rgb(250, 250, 250);
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.sub1 > nav ul li {
    text-align: center;
}

.sub1 > a:hover + nav, .sub1 > a + nav:hover {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container nav>ul>li>a span.toggle {
    background-color: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .25);
    padding: 2px 8px;
}

main {
    height:4000px;
}

@media (min-width: 751px){
    #bottom-container > nav > ul {
        flex-direction: row;
        height: 3rem;
    }
    
    #bottom-container nav>ul>li>a span.toggle {
        display: none;
    }
    
    #bottom-container {
        height: 100%;
        border-top: calc(5vh + 2vw) solid yellow;
        visibility: visible;
        opacity: 1;
        position: static;
    }

    #navToggle {
        display: none;
    }
}
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>
    <header>
        <div class="wrapper">
            <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>
        </div>
        
    </header>


    <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>
ขยายตัวอย่างข้อมูล

— Aleksandr Belugin
แหล่งที่มา
บนหน้าจอขนาดเล็กเมื่อส่วนหัวเป็นสีเทาเนื้อหาหลักจะเลื่อนหน้าส่วนหัว
— สิ่ง
@ ทุกอย่างเป็นเพราะช่องอัลฟาในพื้นหลังสี: rgba (0, 0, 0, .15) ฉันใช้สีจากรหัสของผู้แต่ง
— อเล็กซานเดอร์เบลูจิ
4

โปรดลบส่วนหัว div สองอันดับแรกขององค์ประกอบส่วนหัวเนื่องจากไม่จำเป็นต้องห่อส่วนหัว องค์ประกอบส่วนหัวเป็นภาชนะแล้ว

โปรดลบheight:200rem;ในสไตล์ส่วนหัวและpadding-top: 13rem or 5remสำหรับสไตล์ขององค์ประกอบหลัก

สุดท้ายโปรดอัปเดตคุณสมบัติตำแหน่งของส่วนหัวสไตล์เป็นเหนียวแทนabsoluteและเพิ่มดัชนี z

ด้านล่างฉันได้ทำการทดสอบและปรับปรุง codebase แล้ว

$(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;
}

main{
  height:4000px;
  position:relative;
}

header{
  position: sticky;
  z-index: 100;
  top:0;
  left:0;
  width:100%;
}

#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{
  /* remove padding top */
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/

/* 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>

  <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>

  <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>
 Run code snippet
ขยายตัวอย่างข้อมูล

— ลุกขึ้น
แหล่งที่มา
บนหน้าจอขนาดเล็กเมื่อส่วนหัวเป็นสีเทาเนื้อหาหลักจะเลื่อนหน้าส่วนหัว
— สิ่ง
เนื่องจากมีการตั้งค่าความทึบของพื้นหลังในองค์ประกอบ navToggle ของส่วนหัว ในการแก้ไขคุณสามารถลบความทึบนั้นได้
— เพิ่ม
4

นี่คือการจัดเรียงของสับหยาบ <main>แต่คุณสามารถสร้างส่วนหัวที่สองที่ซ่อนอยู่เบื้องหลังตัวจริงซึ่งการเข้าพักในเอกสารไหลและผลักดันลง

เพียงแค่ทำซ้ำองค์ประกอบที่ทำขึ้นส่วนหัวให้พวกเขาลดลงz-indexและเปลี่ยนจากการposition: fixed position: relativeแล้วเพียงแค่ได้รับการกำจัดของความสูงของที่ซ่อนอยู่ที่<header>องค์ประกอบและลบจากpadding-top<main>

$(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,
#hidden-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}
#hidden-wrap header {
  height: inherit;
  position: relative;
}
#second-wrap{
    position: fixed;
    width:100%;
    z-index:999;
}
#second-wrap2{
    position: relative;
    width:100%;
    z-index:998;
}

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,
#navToggle2{
  background-color: rgba(0, 0, 0, .15);
  position: relative;
  right: 0;
  top: 0;
  z-index:999;
  height: 2.6rem;
}

#navToggle>a,
#navToggle2>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,
#bottom-container2{
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

#bottom-container>nav,
#bottom-container2>nav{
  background-color: rgb(250, 209, 14);
  display: none;
  flex: 1;
}

#bottom-container nav>ul,
#bottom-container2 nav>ul{
  list-style-type: none;
}

#bottom-container nav>ul>li,
#bottom-container2 nav>ul>li{
  position: relative;
}

#bottom-container nav>ul>li>a,
#bottom-container2 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,
#bottom-container2 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,
#bottom-container2>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,
  #navToggle2{
    display: none;
  }

  #bottom-container,
  #bottom-container2{
    background-color: rgb(250, 209, 14);
    width: 100%;
    border-top: calc(5vh + 2vw) solid yellow;
  }

  #bottom-container>nav,
  #bottom-container2>nav{
    display: block;
  }

  #bottom-container>nav>ul,
  #bottom-container2>nav>ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 3rem;
  }

  #bottom-container nav>ul>li,
  #bottom-container2 nav>ul>li{
    position: static;
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-container nav>ul>li>a,
  #bottom-container2 nav>ul>li>a{
   padding: 0;
  }

  #bottom-container nav>ul>li>a span.toggle,
  #bottom-container2 nav>ul>li>a span.toggle{
    display: none;
  }

  #bottom-container >nav>ul>li>nav>ul>li,
  #bottom-container2 >nav>ul>li>nav>ul>li{
    line-height: 2.5rem;
  }
  #bottom-container>nav>ul>li>nav,
  #bottom-container2>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>
<div id="hidden-wrap">
  <div id="second-wrap2">
    <header>
      <div id="navToggle2"><a href="#">Menu</a></div>
      <div id='bottom-container2'>
        <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>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  </div>
</div>

<main>
  <p>now you can see this text</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>
ขยายตัวอย่างข้อมูล

แก้ไข:ฉันไม่รู้ว่าทำไมฉันไม่เคยคิดถึงเรื่องนี้มาก่อน เพียงแค่ตั้งค่า#headwrapและการ<main> position: relativeจากนั้นเอาheightบน<main>และตั้งค่า<body>การและdisplay: flex flex-direction: columnสุดท้ายห่อเนื้อหาของ<main>ใน<div>ใน

ที่นี่ฉันได้ตั้งค่าความสูงของ div เป็น 4000px เพื่อสาธิตการเลื่อน

$(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: 100vh;
  display: flex;
  flex-direction: column;
}

#head-wrap{
    margin: 0 auto;
    position: relative;
    width:100%;
}

#second-wrap{
    position: relative;
    width:100%;
    z-index:999;
}

main{
  /*height:4000px;*/
  position:relative;
  overflow: auto;
  /* padding-top:13rem; */
}

main>div {
  height: 4000px;
}

header{
  position: relative;
  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>
  <div>
  <p>now you can see this text</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>
    </div>
</main>
</body>
</html>
ขยายตัวอย่างข้อมูล

— thingEvery
แหล่งที่มา
ขอบคุณสำหรับโซลูชันที่สร้างสรรค์ แต่ดูเหมือนว่ารหัสที่ Google ไม่ชอบมาก เนื้อหาระดับการนำทางซ้ำและซ่อนอยู่ ฉันหวังว่าจะมีเคล็ดลับการวางตำแหน่งที่ฉันไม่รู้ แต่ฉันเริ่มตระหนักว่าโซลูชัน jQuery เป็นวิธีที่ดีที่สุดในการแก้ไขปัญหานี้ ฉันจะปล่อยให้เงินรางวัลเปิดเพียงเพื่อดูว่ามีวิธีการแก้ปัญหาอื่น ๆ หากไม่มีใครเข้ามาฉันจะทำเครื่องหมายคำตอบของคุณถูกต้อง
— ออสติน
@ Austin ใช่เลย ฉันสนใจที่จะเห็นวิธีแก้ไขปัญหาอื่น ๆ เช่นกัน
— สิ่ง
@ Austin ฉันได้อัปเดตคำตอบของฉันด้วยโซลูชันที่ดีกว่ามาก
— สิ่ง
0

แก้ไขง่ายฉันใช้paddingใน%ค่อนข้างแล้วremหรือpx

$(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);
}


/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////   Use padding in %  //////////
*/

main {
  padding-top: 11%;
}

@media (max-width:1200px) {
  main {
  padding-top: 12.5%;
}
}

@media (max-width:1023px) {
 main {
  padding-top: 14.5%;
}
}

@media (max-width:767px) {
  main {
  padding-top: 8%;
}
}


/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/


/* 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>
ขยายตัวอย่างข้อมูล

— Awais
แหล่งที่มา
หากหน้าต่างกว้างประมาณ 900px บรรทัดบนสุดยังคงถูกตัดออก
— สิ่ง
@thingEvery Updated ans ของฉันโดยใช้media-quiresป่วยจัดการในการปรับขยายในขณะนี้ปรับการทำงานโปรดตรวจสอบและแจ้งให้เราทราบ
— Awais
สิ่งนี้ดีกว่า แต่ข้อความบางส่วนยังคงถูกตัดระหว่าง 751px ถึง 767px ยิ่งไปกว่านั้น OP ระบุว่า "แนวคิดการเติมด้านบนสุดแย่ลงเมื่อวางองค์ประกอบหลายอย่างภายใน <header> ซึ่งใช้ความสูงแบบสัมพัทธ์หรือเปอร์เซ็นต์ตาม" ฉันอาจจะแค่ไปเส้นทาง jQuery แต่นอกเหนือจากนั้นการสร้างข้อความค้นหาสื่อจำนวนมากอาจเป็นตัวเลือกที่แท้จริงของเขาเท่านั้นตราบใดที่องค์ประกอบในส่วนหัวของเขาจะไม่เปลี่ยนแปลง
— สิ่ง
1
ฉันเพิ่งสร้าง quries ซึ่งส่วนใหญ่ใช้โดยอุปกรณ์ที่เขาสามารถเปลี่ยนได้ตามนั้นหรือใช้อีกหนึ่งคำถามระหว่าง 700 ถึง 767 n วินาทีที่ฉันเห็นด้วยกับคุณโดยทั่วไปส่วนหัวควรมีความสูงคงที่และเนื่องจากเรามีตัวเลือกมากมาย แก้ไขตำแหน่งของเนื้อหาให้ถูกต้องมิฉะนั้น Jquery เป็นตัวเลือกเดียวที่จะเล่นกับคุณได้เมื่อเอ่ยถึง ......
— Awais
0

คุณไม่ได้มองหาตำแหน่ง: เหนียว; ด้านบน: 0; ? คุณต้องการที่จะมีเมนูที่ตามผู้ใช้เมื่อเขาเลื่อนไปทางขวา? จากนั้นลองเปลี่ยน# bottom-containerเป็น:

#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
  position: sticky;
  top: 0;
  z-index: 1; 
}

และฉันคิดว่ามัน แต่สิ่งหนึ่งที่แน่นอน - คุณต้องคิดใหม่ว่าคุณสร้างโครงสร้างทั้งหมดนี้เพราะมันยุ่งเหมือนนรก คุณสามารถได้ผลลัพธ์เดียวกันกับ:

HTML:

<header>
    <nav id="mobileMenu"><a href="#">Menu</a></nav>
    <nav id='menu'>
      <div class="menuItem">
        <a href="#">ITEM ONE</a>
      </div>
      <div class="bigMenuItem">
        HOVER ME
        <div class="menuItemsCon">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </div>
      <label class="bigMenuItem" for="inputClick">
        CLICK ME
        <input type="checkbox" name="input" id="inputClick" style="display:none;">
        <div class="menuItemsCon click">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </label>
    </nav>
  </header>

  <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>
  </main>

style.css:

* {
  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;
}
main{
  height:100vh;
  position:relative;
}

/*Changed classes*/

header{
  position: sticky;
  top:0;
  z-index: 1;
}

a{
  display: block;
  color: rgba(0, 0, 0, .65);
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#mobileMenu{
  display: none;
  background-color: rgba(0, 0, 0, .15);
  height: 2.6rem
}

#mobileMenu 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;
}

#menu{
  background-color: rgb(250, 209, 14);
  border-top: calc(5vh + 2vw) solid yellow;
  display: flex;
  z-index: 999;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

@media only screen and (max-width:751px) {
  #mobileMenu{
    display: block;
  }
  #menu{
    display: none;
  }
}

#menu > .menuItem, #menu > .bigMenuItem{
  width: calc(100%/3);
  height: 3rem;
  text-align: center;
  line-height: 3rem;
}

#menu > .bigMenuItem{
  position: relative;
  cursor: pointer;
}

#menu > .bigMenuItem .menuItemsCon{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
  opacity: 0;
  position: relative;
  top: -100vh;
  transition: all .5s;
}


#menu > .bigMenuItem .menuItemsCon > .menuItem{
  height: 3rem;
  background-color: #FFF;
}

/* and if you want to click for submenu to show*/
#menu  .bigMenuItem input:checked + .menuItemsCon, #menu  .bigMenuItem:hover .menuItemsCon:not(.click){
  opacity: 1;
  top: 0;
}

และไม่มี JS cuz หากคุณไม่ต้องใช้ ฉันหวังว่านี่จะช่วยได้.

— Mortimer
แหล่งที่มา
0

ฉันสามารถเสนอ Vanilla-JavaScript ให้คุณแทน jQuery ...

พยายามทำให้ขนาดของ "ส่วนหัว" เมื่อหน้าโหลด (เหตุการณ์ onload) และเพิ่มลงในช่องว่างภายในของ "หลัก":

window.addEventListener("load", function(e){
  my_main.style.paddingTop = my_header.clientHeight + "px";
}, 1);

เพื่อที่จะทำงานฉันได้ให้ "id" กับ "ส่วนหัว" และองค์ประกอบ "หลัก":

<header id="my_header"> <main id="my_main">

window.addEventListener("load", function(e){
  my_main.style.paddingTop = my_header.clientHeight + "px";
}, 1);
* {
    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;
 }

header {
    width: 100%;
    position: sticky;
    top: 0;
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

.wrapper {
    position: relative;
    background-color: rgba(0, 0, 0, .15);
}

#navToggle {
    display: inline-block;
    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;
}

#navToggle:hover + #bottom-container, #bottom-container:hover  {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container {
    background-color: rgb(250, 209, 14);
    width: 100%;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
}

#bottom-container > nav  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#bottom-container > nav > ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

#bottom-container > nav > ul li {
    display: flex;
    justify-content: center;
    width: 100%;

}

#bottom-container nav > ul > li > a {
    display: block;
    color: rgba(0, 0, 0, .65);
    padding: 1.3rem 0;
    text-decoration: none;
}

.sub1 {
    position: relative;
}

.sub1 > nav {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    background-color: rgb(250, 250, 250);
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.sub1 > nav ul li {
    text-align: center;
}

.sub1 > a:hover + nav, .sub1 > a + nav:hover {
    visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-in-out;
}

#bottom-container nav>ul>li>a span.toggle {
    background-color: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .25);
    padding: 2px 8px;
}

main {
    height:4000px;
}

@media (min-width: 751px){
    #bottom-container > nav > ul {
        flex-direction: row;
        height: 3rem;
    }
    
    #bottom-container nav>ul>li>a span.toggle {
        display: none;
    }
    
    #bottom-container {
        height: 100%;
        border-top: calc(5vh + 2vw) solid yellow;
        visibility: visible;
        opacity: 1;
        position: static;
    }

    #navToggle {
        display: none;
    }
}
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>
    <header id="my_header">
        <div class="wrapper">
            <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>
        </div>
        
    </header>


    <main id="my_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>
ขยายตัวอย่างข้อมูล

— เฟเดริโก้
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.