Question

我有一个使用Bootstrap 3导航栏的网站。它位于块div下方280px处，当滚动到该点时粘到页面顶部

HTML（在＆lt; head＆gt;标记中）

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

当它滚动到它应该的方式时，它会粘在页面上。但是当＆＃39; nav＆＃39; div得到位置：固定属性应用，它不再在内容流中，内容跳跃＆＃39;与导航高度相同的高度。

如何防止内容跳跃？

Answer 1

在标题周围创建一个包装元素。将相同的高度应用于包装。现在，如果你修改了标题，那么包装元素仍将存在，占据相同的高度

这是一个例子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Refer

Answer 3

我最近有这个问题。我通过放置一个位置来解决它：我的导航后面的绝对div并使用它作为addClass的滚动点参考。老实说，我不太清楚为什么会有效，但确实如此！

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

3 个答案: