我想像这个例子一样在粘性导航上方插入一个 div:
http://www.codeply.com/go/bp/ACfflljMW1
但是，当我尝试实现它时，它似乎不起作用。为了使此解决方案正常工作，我缺少什么明显的东西吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<style type="text/css">
/* CSS used here will be applied after bootstrap.css */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse navbar-static-top" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
<script type="text/javascript">
$('[data-toggle=popover]').popover({placement: function() {
if($('.navbar-inverse').hasClass('affix-top')) {
console.log("top");
return 'top';
}
else {
console.log("bottom");
return 'bottom';
}
}
});
</script>>
</body>
</html>
最佳答案
因此在检查了 Google Chrome 上的错误后，发现我的 jquery 版本太高了。
使用 jquery 1.9 及以下版本 3 即可!
关于javascript - Bootstrap 在粘性导航上方插入 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38617250/