Css 粘性菜单高度调整不正确

Question

为什么当我滚动时，导航的高度会调整大小并变得比应有的更大。我该如何解决这个问题？

完整代码：https://jsfiddle.net/9Leq24dq/

$(function() {
  var navOffset = $('nav').offset().top;
  $("nav").wrap('<div class="nav-placeholder"></div>');
  $(".nav-placeholder").height($("nav").outerHeight());

  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos >= navOffset) {
      $("nav").addClass("fixed");
    } else {
      $("nav").removeClass("fixed");
    }
  });
});

body {
  background-color: #eee;
}
#menu {
  text-align: center;
}
header {
  width: 950px;
  height: 120px;
  background-color: #1B78EA;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
header h1 {
  line-height: 120px;
  font-family: sans-serif;
}
nav {
  background-color: #7B7B7B;
  width: 950px;
  margin: 0 auto;
}
.nav-palceholder {
  margin: 0 0 20px 0;
}
.menu {
  text-align: center;
}
.menu li {
  list-style-type: none;
  display: inline-block;
  line-height: 49px;
  cursor: pointer;
  padding: 8px 15px 8px 15px;
}
nav li:hover {
  background-color: #999999;
}
.menu a {
  text-decoration: none;
  font-size: 18px;
  font-family: sans-serif;
  text-align: center;
  position: relative;
  color: #eee;
  font-weight: bold;
}
.content {
  margin-top: 80px;
}
.content h1 {
  text-align: center;
  margin-top: 20px;
  font-family: sans-serif;
  margin-bottom: 40px;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 2px #646464;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
  <h1>Header</h1>
</header>
<nav class="menu">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</nav>
</div>
<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Id optio blanditiis, beatae voluptatem enim consequuntur, in inventore necessitatibus laborum, amet ab? Consequuntur fugiat dolorem dolore, amet dolores repudiandae, voluptates dicta!</p>
</div>

Answer 1

您必须指定 .nav 高度

 nav  {
    background-color: #7B7B7B;
    width: 950px;
    margin: 0 auto;
    height: ; /* for ex. 75px */
}

Answer 2

您最好为 ul 重置默认的 padding 和 margin:

.menu ul {
  padding: 0;
  margin: 0;
}

Updated jsFiddle

Answer 3

修复后，您的浏览器正在为 ul 添加边距。您可以添加此规则以删除该边距并保持导航高度相同：

.fixed ul{
  margin:0px;
}