我有3个固定元素 - 顶部导航 - 广告横幅 - subMenu
我希望那些位置固定，但是，有时候，广告横幅可以被隐藏，在这种情况下，subMenu应该仍然是位置固定的。是否有非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;
}
只需将固定元素包装在同一个容器中，然后修复此容器：
.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>