Расположение прокручиваемого контента в фиксированном меню навигации flexbox

Question

У меня есть следующий фрагмент (необходимо просмотреть в полноэкранном режиме), который я пытаюсь разместить элемент <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>

Answer 1

Пожалуйста, удалите первые два верхних контейнера div элемента header, так как нет необходимости переносить заголовок. элемент заголовка уже является контейнером.

Удалите height:200rem; в стиле заголовка и padding-top: 13rem or 5rem для стиля основного элемента.

Наконец, обновите свойство позиции стиля заголовка до sticky вместо absolute и добавьте z-index.

Ниже я протестировал его и обновил кодовую базу.

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

Answer 2

Это своего рода грубый взлом, но вы можете создать второй заголовок, который прячется за реальным, который остается в потоке документов и выталкивает вниз <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 на 4000 пикселей, чтобы продемонстрировать прокрутку.

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

Answer 3

Я добился того же результата (поправьте меня, если я ошибаюсь), но без 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>

Answer 4

Я могу предложить вам Vanilla- JavaScript вместо jQuery…

Попробуйте получить размер «заголовка» при загрузке страницы (событие onload) и добавить его в дополнение к « main ":

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

для того, чтобы работать Я дал" id "для" header "и для" main "элементов:

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

Answer 5

вы не ищете позиция: липкая; top: 0; ? Вы хотите иметь меню, которое следует за пользователем, когда он прокручивает правильно? Затем попробуйте изменить # нижний контейнер на:

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

стиль. 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 Потому что, если вы не нужно не использовать это. Надеюсь, это поможет.

Answer 6

Простое исправление, я использовал 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>