[英]stopping content from 'jumping' when navbar fixes to top of screen
我有一個利用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高度相同的高度。
如何防止內容跳動？
在標頭周圍創建一個包裝元素。 對包裝紙施加相同的高度。 現在，如果您將標頭固定，則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>
不要創建像sticky這樣的自定義類，因為它要使用navbar-fixed-top類，
if (windowpos >= pos.top) {
s.addClass("navbar-fixed-top");
} else {
s.removeClass("navbar-fixed-top");
}
我最近也有這個問題。 我通過在我的導航后面放置一個position：absolute div並將其用作addClass的滾動點引用來解決此問題。 老實說，我不太確定為什么會這樣，但確實如此！
通過js添加HTML元素時阻止IE跳轉到頁面頂部
[英]Stopping IE from jumping to top of page when HTML element is added via js
Twitter Bootstrap 3 - Navbar固定頂部 - 多行時重疊內容
[英]Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.