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

Question

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

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

＆＃13;

＆＃13;

$(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");
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须指定.nav height

$scope.products = _.flatten(manufacturers.map(function(m) {
  return m.products.map(function(p) {
     var o = angular.extend({}, p);
     o.providerName = m.manufacturerName;
     return o;
  });
}));

Answer 2

您最好重置 public void importExcel(string path, string sheetName) { var excel = new LinqToExcel.ExcelQueryFactory(path); excel.ReadOnly = true; var companies = from a in excel.Worksheet(sheetName) select a; var columnNames = excel.GetColumnNames(sheetName); foreach (var columnName in columnNames) { dtExcelRecords.Columns.Add(columnName); } foreach (var row in companies) { DataRow dr = dtExcelRecords.NewRow(); foreach (var columnName in columnNames) { dr[columnName] = row[columnName]; } dtExcelRecords.Rows.Add(dr); } dataGridView1.DataSource = dtExcelRecords; } 的默认padding和margin：

ul

<强> Updated jsFiddle

Answer 3

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

.fixed ul{
  margin:0px;
}