当导航栏固定到屏幕顶部时，阻止内容“跳转”

Question

我有一个利用Bootstrap 3导航栏的网站。 它位于块div下方280像素处，并滚动到该点时停留在页面顶部

HTML（在<head>标记中）

<script>
  $(document).ready(function() {
  var s = $("#nav");
  var pos = s.position();                    
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick"); 
    }
  });
});

HTML

<div id="nav">
  <div class="navbar navbar-default navbar-static">
     <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

...

CSS

header {
  height:280px;
}

.stick {
  position:fixed;
  top:0px;
  width: 100%;
}

当滚动到其应有的方式时，它会粘在页面上。 但是，当'nav'div应用了position：fixed属性时，它不再位于内容流中，并且内容'跳跃'到与nav高度相同的高度。

如何防止内容跳动？

Answer 1

在标头周围创建一个包装元素。 对包装纸施加相同的高度。 现在，如果您将标头固定，则wrapper元素仍将存在，并占据相同的高度

这是一个例子

  $(document).ready(function() { var s = $("#nav"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos >= pos.top) { s.addClass("stick"); } else { s.removeClass("stick"); } }); });

 body {margin:0} #nav, .nav-wrapper { height:100px; background: gray; } .stick { position:fixed; top:0px; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> <div class="nav-wrapper"> <div id="nav"> <div class="navbar navbar-default navbar-static">Header</div> </div> </div> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br> Content content content<br>

Answer 2

不要创建像sticky这样的自定义类，因为它要使用navbar-fixed-top类，

if (windowpos >= pos.top) {
    s.addClass("navbar-fixed-top");
} else {
    s.removeClass("navbar-fixed-top"); 
}

参考

Answer 3

我最近也有这个问题。 我通过在我的导航后面放置一个position：absolute div并将其用作addClass的滚动点引用来解决此问题。 老实说，我不太确定为什么会这样，但确实如此！

当导航栏固定到屏幕顶部时，阻止内容“跳转”

问题描述

3 个解决方案

解决方案1
4 已采纳 2015-08-17 06:10:18

解决方案2
1 2015-08-17 04:45:37

解决方案3
0 2015-08-17 04:52:17

当导航栏固定到屏幕顶部时，阻止内容“跳转”

问题描述

3 个解决方案

解决方案1 4 已采纳 2015-08-17 06:10:18

解决方案2 1 2015-08-17 04:45:37

解决方案3 0 2015-08-17 04:52:17

解决方案1
4 已采纳 2015-08-17 06:10:18

解决方案2
1 2015-08-17 04:45:37

解决方案3
0 2015-08-17 04:52:17