当导航栏固定在屏幕顶部时，如何防止内容“跳动”？

Question

我是一位有用的助手，可以翻译文本。

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

HTML（在标签中）：

<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属性时，它不再处于内容流中，内容会向上“跳”，跳的高度与导航栏的高度相同。如何避免内容跳动？

- user3550879

---

您可以在元素周围创建一个容器，然后将其应用于容器。然后，您可以将标题固定在顶部，但其父元素将占据相同的高度。 - rzr

我有点困惑，不太明白你的意思。 - user3550879

我已将其添加为答案。 - rzr

Answer 1

在您的标题周围创建一个包装元素。将相同的高度应用于包装器。 现在，如果您使您的标题固定，包装元素仍将存在，并占据相同的高度。

这是一个例子：

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

- rzr

---

抱歉，刚注意到还有一个小跳跃。不是很大，不确定这是否是浏览器问题。 - user3550879

它更像是向侧面跳跃，当它到达固定位置时，它会重新对齐（减少填充等）。 - user3550879

Answer 2

不要创建类似 sticky 的自定义类，而是使用 navbar-fixed-top 类，如下所示：

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

{{链接1：参考}}

- Rohan Kumar

---

当页面向上滚动时，该元素是否会保持在“header” div底部，并且如果用户向上滚动页面，它是否会回到原来的位置？ - user3550879

Answer 3

我最近也遇到了这个问题。我通过在导航栏后面放置一个position:absolute的div，并将其用作addClass的滚动点参考来解决它。说实话，我不太确定为什么它有效，但确实有效！

- Mark Anderson