一旦我向下滚动导航变得固定，这很好，但内容会跳到它后面。随着浏览器窗口在我建造的实际网站上变小，导航的高度将会发生变化，因此我无法在内容上使用固定的高度边距来推动它。由于它所需的边距将根据浏览器窗口大小而有所不同。有没有办法用jQuery解决这个问题？ 这是一个现场演示http://codepen.io/Reece_Dev/pen/VpXVMq谢谢
HTML：
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
<header>Logo</header>
<nav>
<div class="burger-button">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Opening Times</a></li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
CSS：
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
margin: 0 auto;
background-color: #0000aa;
font-size: 5em;
text-align: center;
}
nav{
width: 1200px;
margin: 0 auto;
background-color: #0000ff;
}
nav ul{
overflow: hidden;
color: #fff;
text-align: center;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 1em 2em;
}
nav ul li a{
color: inherit;
text-decoration: none;
font-size: 1.5em;
}
section{
width: 1200px;
margin: 0 auto;
line-height: 1.5em;
font-size: 1em;
text-align: center;
padding-top: 2em;
background-color: #4488ff;
}
.burger-button{
width: 100%;
background-color: white;
text-align: right;
box-sizing: border-box;
padding: 1em;
cursor: pointer;
display: none;
}
.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
}
@media screen and (max-width:1200px){
header{
width: 100%;
}
nav{
width: 100%;
}
section{
width: 100%;
}
}
@media screen and (max-width: 480px){
nav ul{
max-height: 0;
}
.showing{
max-height: 13em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
}
.burger-button{
display: inline-block;
}
}
jQuery的：
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
} else{
jQuery("nav").removeClass("fixed");
}
});
});
答案 0 :(得分：2)
您需要考虑导航的高度，因为在设置position: fixed;时它会被取出内容流。
<强> 的jQuery
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("nav").removeClass("fixed");
jQuery("section").css("margin-top", "0");
}
});
jQuery(window).resize(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("section").css("margin-top", "0");
}
});
});
这样做会增加一个余量，以抵消当内容未被修复时推送内容的导航高度。那应该为你做。
<强> 修改
我已经更新了代码，所以它现在只使用jQuery而不是调整大小会重新计算nav的高度并调整section元素的边距。
答案 1 :(得分：1)
如果您的意思是滚动条可以覆盖固定元素，那么您最好选择使用flexbox进行布局。
固定元素必须由滚动条
覆盖答案 2 :(得分：0)
我在您的codepen演示中测试了以下代码：
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
var navHeight = jQuery("nav").height();
jQuery("section").css({"margin-top" : navHeight});
} else{
jQuery("nav").removeClass("fixed");
jQuery("section").css({"margin-top" : 0});
}
});
});
它适用于您的演示。我希望它能解决这个问题。