答案 0 :(得分：1)
当导航为fixed时，将一些左边距应用于右侧的容器，因为它已从流中移除。
$(window).scroll(function() {
var navs = document.getElementsByTagName("nav")[0];
var heigh = $("header:first").outerHeight();
var wid = $("nav:first").width();
if (wid != $(window).width() && document.body.scrollTop >= heigh) {
navs.style.position = "fixed";
$("nav").css("top", "0");
// Here is the fix
$('.col-9').css('margin-left', wid);
} else {
navs.style.position = "relative";
$('.col-9').css('margin-left', 0);
}
});* {
box-sizing: border-box;
}
html,
body {
font-size: 35px;
padding: 0;
margin: 0;
display: block;
}
.row::after {
content: "";
clear: both;
display: block;
}
header,
footer {
text-align: left;
padding: 30px;
margin: 0;
}
header h1 {
margin: 0;
padding: 0;
}
nav {
background-color: #ff00ff;
position: relative;
overflow-y: scroll;
height: 100%;
top: 0;
}
ul {
/*overflow: scroll;*/
}
section {
background-color: #ff0000;
padding: 0 80px;
}
.col-3 {
width: 25%;
float: left;
}
.col-9 {
width: 75%;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<h1>HELL!<h1></header>
<div class="row">
<nav class="col-3">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>third</li>
<li>first</li>
<li>second</li>
<li>end</li>
</ul>
</nav>
<section class="col-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis. Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam ullamcorper interdum est nec tincidunt.
</p></section>
</div>
<footer><h3>HELL!<h3></footer>