当我滚动浏览导航栏时，我正试图在页面底部加载一个引导导航栏并坚持到顶部。
我试过了词缀
https://www.w3schools.com/bootstrap/bootstrap_affix.asp
工作得很好但是......
我们需要指定要滚动到的高度。在我的情况下，我需要它在任何大小的屏幕的底部。因此，100％大小的元素正在工作，但我仍然需要通过电话附加我将滚动到的像素数。
该代码段可以正常使用。代码接缝工作正常，但我给一个html数据属性的值，它有点坚持。即使我使用jquery更改了值。当屏幕变小并且导航栏在导航栏之后粘到顶部或者很多像素时，我会注意到它。
尝试全屏运行代码段并将浏览器窗口调整为屏幕的一半。
任何人都可以帮助我解决这个问题。类似导航行为的任何工作例子？愿意再做一些代码！
var wtf;
$(document).ready(function(){
var $nav = $('#nav');
var $mainImg = $('#mainImg');
var $window = $(window).on('resize', function(){
var height = $(this).height() - $nav.height();
$mainImg.height(height);
$nav.attr("data-offset-top",height);
wtf=height
}).trigger('resize'); //on page load
});
$(document).ready (function(){
var atr = $("#nav").data('offset-top');
$("#nav").attr("data-offset-top", wtf);
});.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.mainImg{
position:relative;
height:100%;
background-image:url('../images/mainImg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="body">
<div id="mainImg" class="container-fluid mainImg">
</div>
<nav id="nav" class="navbar navbar-inverse navbar-top" data-spy="affix" data-offset-top="899">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">ROUTESRATE</a></li>
<li><a href="#">ROUTE</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">MEDIA</a></li>
</ul>
</div>
</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>
</body>
</html>