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

Question

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

use*_*879 4 html javascript css jquery twitter-bootstrap

我有一个使用 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"); 
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

超文本标记语言

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

...

Run Code Online (Sandbox Code Playgroud)

CSS

header {
  height:280px;
}

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

Run Code Online (Sandbox Code Playgroud)

当页面按预期方式滚动时，它会粘在页面上。但是，当“nav”div 获得应用的位置：固定属性时，它不再位于内容流中，并且内容“跳跃”到与导航高度相同的高度。

如何才能让内容不跳转呢？

Answer 1

rzr*_*rzr 5

在标题周围创建一个环绕元素。对包装纸应用相同的高度。现在，如果您固定标题，包装元素仍然存在，占据相同的高度

这是一个例子

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

Run Code Online (Sandbox Code Playgroud)

body {margin:0}

#nav, .nav-wrapper {
  height:100px;
    background: gray;
}

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	6244 次
最近记录：	10 年，3 月前