html - 固定位置菜单

Question

我有 3 个固定元素 - 顶部导航 - 广告横幅 - 子菜单

我希望那些是位置固定的，但是，有时，广告横幅可以隐藏，在这种情况下，子菜单仍应位置固定。有没有非js解决方案？

目前，bar 已经硬编码了 top 但是如果广告 div 被隐藏，这将不起作用

<div class="page">
  <div class="top-bar"> top nav</div>
  <div class="ads">ads</div>
  <div class="body">
    <div class="bar">sub menu</div>
    <div class="text">
 long long text ...
    </div>
  </div>
</div>

CSS

 .top-bar {
      height: 50px;
      background: blue;
      position: fixed;
      width: 100%;
      top: 0;
    }
    .ads {
      height: 70px;
      background: gray;
      position: fixed;
      top: 50px;
      width: 100%;
    }

    .bar {
      height: 40px;
      width: 100%;
      background: yellow;
      position: fixed;
      top: 110px;
    }

https://codepen.io/anon/pen/bLZgaO

Answer 1

只需将固定元素包裹在同一个容器中，并使这个容器固定:

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}

.top-bar {
  height: 50px;
  background: blue;
}

.ads {
  height: 70px;
  background: gray;
}

.bar {
  height: 40px;
  background: yellow;
}

<div class="page">
  <div class="fixed">
    <div class="top-bar"> top nav</div>
    <div class="ads">ads</div>

    <div class="bar">sub menu</div>
  </div>
  <div class="body">
    <div class="text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
        ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
        Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
        quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
        sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
        finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
        Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
        et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
        leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
        et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
        massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
        ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.


      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
        ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
        Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
        quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
        sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
        finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
        Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
        et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
        leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
        et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
        massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
        ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.


      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
        ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
        Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
        quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
        sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
        finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
        Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
        et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
        leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
        et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
        massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
        ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.


      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
        ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
        Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
        quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
        sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
        himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
        finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
        Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
        et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
        leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
        et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
        massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
        ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.


      </p>
    </div>
  </div>
</div>