Javascript 如何让引导导航栏与用户一起滚动?
我已经有一段时间没有编写任何程序了。我想复制导航栏使用的效果。然而,我最接近实际代码的地方是: $'body'。在'scroll'上,函数{ $'.navbar'.cssbottom,$'.navbar'.outerHeighttrue; };Javascript 如何让引导导航栏与用户一起滚动?,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我已经有一段时间没有编写任何程序了。我想复制导航栏使用的效果。然而,我最接近实际代码的地方是: $'body'。在'scroll'上,函数{ $'.navbar'.cssbottom,$'.navbar'.outerHeighttrue; }; 如何修复此问题以复制上面链接中的效果?很简单。请看下面的示例: 只需将CSS类fixed top放在nav元素上,如示例所示: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg
如何修复此问题以复制上面链接中的效果?很简单。请看下面的示例: 只需将CSS类fixed top放在nav元素上,如示例所示:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
请参见这是否回答了您的问题?
<nav class="navbar sticky-top navbar-light bg-light"><a class="navbar-brand" href="#">Sticky top</a></nav>