我已经搜索了整堆，但似乎找不到可行的解决方案。基本上我完全按照自己的想法获得了NavBar。我现在想要在我的页面向下滚动时缩小NavBar，使用一个漂亮的平滑过渡（动画）使其更加纤薄。
这是我当前NavBar的HTML标记：
<header>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You – Perth Website Branding"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
</header>
我是如何实现这一目标的？我做了很多搜索，但大多数解决方案都是针对Bootstrap 3。
干杯
答案 0 :(得分：11)
2018年更新
Bootstrap 3.x的滚动Navbar实现的大部分收缩都是使用Affix组件在特定滚动位置更改导航栏的样式完成的。
然而，来自Bootstrap 4的附件has been dropped ..
＆＃34;删除了Affix jQuery插件。我们建议使用一个位置：粘性 polyfill而不是。有关详细信息和具体信息，请参阅HTML5 Please条目 polyfill推荐。＆＃34;
要在Bootstrap 4中创建类似的Navbar效果，您可以通过将 position: sticky 类添加到Navbar来使用sticky-top（并非在所有浏览器中都支持）。这适用于＆＃34; 坚持＆＃34;当Navbar到达顶部时，但是没有触发事件以指示它何时＆＃34; 卡住＆＃ 34 ;.因此，当需要JS＆＃34; 卡住＆＃34;
现代浏览器支持的一种JS方法是IntersectionObserver。用它来观察＆＃34;当导航栏上方的隐藏触发元素到达视口时（stuck元素应用html时）。
.stuck .sticky-top {
background-color: #222;
padding-top: 3px;
padding-bottom: 3px;
}
Sticky Top Navbar - IntersectionObserver Demo
您还可以使用jQuery插件，例如ScrollPos-Styler，或编写自己的jQuery来控制滚动条的导航栏样式...
工作原理：
带有data-toggle="affix"的固定顶级导航栏：
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix">
<a href="#" class="navbar-brand">Brand</a>
<a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</a>
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">..</a>
</li>
</ul>
</div>
jQuery观看滚动位置并有条件地切换.affix类：
var toggleAffix = function(affixElement, scrollElement, wrapper) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top;
if (scrollElement.scrollTop() >= top){
wrapper.height(height);
affixElement.addClass("affix");
}
else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
/* use toggleAffix on any data-toggle="affix" elements */
$('[data-toggle="affix"]').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, $(this), wrapper);
});
// init
toggleAffix(ele, $(window), wrapper);
});
CSS来操作词缀样式（填充/高度，颜色等）：
html,body {
height:100%;
padding-top:56px; /*height of fixed navbar*/
}
.navbar {
-webkit-transition:padding 0.2s ease;
-moz-transition:padding 0.2s ease;
-o-transition:padding 0.2s ease;
transition:padding 0.2s ease;
}
.affix {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
section {
min-height:calc(100% - 70px);
}
注意：从 Bootstrap 4.0.0 开始，当navbar-toggleable-*更改为navbar-expand-时，导航栏略有变化
Sticky Top Navbar - jQuery Demo
最后，如果你知道Navbar需要坚持的确切位置，你可以使用一个简单的jQuery $（window）.scroll（）函数...
$(window).scroll(function() {
/* affix after scrolling 100px */
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix');
} else {
$('.navbar').removeClass('affix');
}
});
https://www.codeply.com/go/62Roy6RDOa
更多Bootstrap 4更改滚动示例上的Navbar样式：
simply sticky after scroll（4.0.0）
shrink height（4.0.0）
shrink height（alpha-6）
transparent over background
change color after scroll
change navbar bg color with scrollspy sections
相关问题：
Fixing navbar to top on scroll
Affix is not working in Bootstrap 4 (alpha)
答案 1 :(得分：5)
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});nav.navbar.shrink {
width: 100%;
height: 35px;
background-color: #111;
box-shadow: 0 1px 0 0 #dadada;
position: fixed;
left: 0px;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-brand img{
height: 50px;
width: 120px;
transition: all 1.5s ease;
}
nav.navbar.shrink a {
font-size: 14px;
padding-bottom: 10px !important;
padding-top: 10px !important;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-toggler {
margin: 8px 15px 8px 0;
padding: 4px 5px;
transition: all 1.5s ease;
}
.header{
height:100px;
}
.navbar-brand{
padding-left:30px;
padding-top:30px;
padding-bottom:30px;
}
.collapse{
padding-right:30px;
}
.logo{
width: 170px;
height: 58px;
}
.hero-container p{
color:black;
text-align: center;
height:auto;
}
.image-container{
text-align:center;
}
.banner{
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
padding-top: 70px;
padding-left: 30px;
padding-right:30px;
padding-bottom: 78px;
width:100%;
height:auto;
}
.banner .row h4,p{
color: white;
}
.client{
height: 635px;
margin-top:74px;
padding-right:10px;
padding-left:10px;
}
.btn-primary{
background: transparent;
width:170px;
border: 1px solid white;
color:white;
}
form{
padding-top:56px;
padding-bottom:56px;
padding-left: 30px;
height:auto;
}
form,h2,label{
color:white;
}
.above{
margin-bottom:34px;
width:100%;
height:auto;
padding-right: 30px;
}
.below{
width:100%;
height:auto;
padding-right: 30px;
}
.heading{
color: black;
margin-top: 62px;
}
.lead{
color:black;
}
.form_banner{
background-image: url(../images/form_banner.jpg);
background-repeat: no-repeat;
width: 100%;
}
.contact{
background-image: url(../images/contact.png);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-top:50px;
height:auto;
width:100%;
padding-left: 313px;
padding-right:313px;
padding-top: 64px;
padding-bottom:64px;
text-align: center;
}
.contact, h5{
color:white;
}
hr{
display: block;
margin-top: 0.1em;
margin-bottom: 0.1em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.footer_img{
padding-left: 30px;
width:170px;
height:63px;
}
.footer{
margin-bottom: 41px;
}<!doctype HTML>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container-fluid">
<div class="header container">
<div class="row">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">HeRo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Customers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Innovation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="hero-container container">
<div class="row">
<div class="col">
<p>Commerce</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col">
<p>Interactive</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Analytics</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Integration</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Cloud & Management Services</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
</div>
</div>
<div class="banner container-fluid">
<div class="row">
<h4>Dedicated, Experience, Innovative</h4>
<p>For over a decade our experienced team has been delivering Digital Commerce solutions that change the way consumers research, interact and purchase. As mobility and pervasive connectivity continue to transform buying habits, we are focused on helping businesses discover and maximise new opportunities – be it direct to consumers, via resellers, or by other innovative models.</p>
<p>Our expertise is centred on the Digital Commerce solution that excels in delivering best-in-class Scalability and User Experience. From our global headquarters in India, we have expanded to empower Clients across four continents, with offices located in Singapore, USA, Australia and the UK.</p>
<h4>BUSINESS</h4>
<p>Our approach is to listen to you as the experts in your market. We look to complement your insight with a project team capable of understanding your business and delivering better digital experience. Our in-country Advisors will help assess your requirements and collaboratively design a service that meets your strategic goals.</p>
<h4>TECHNOLOGY</h4>
<p>With a specialised team of Creative Designers, Developers, Engineers and Architects we have substantial experience across many leading enterprise and open source platforms. Beyond our core expertise in Digital Commerce, we also offer Mobility, Integration, Digital Analytics, Development and other custom Web and applications development services.</p>
</div>
</div>
<!-- FOOTER -->
<div class="footer container">
<div class="clearfix">
<span class="float-left"><a href="#"><img class="footer_img" src="images/ibm_logo.png"></a></span>
<span class="float-right">© AbcXyZ Inc and Affiliates.All Rights Reserved</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
使用此代码。简单易行。我希望你能理解。我做了一个类缩小，一旦它超过50像素就会添加到导航栏。其余的都是css，我已经把它放在Shrink类中了。
答案 2 :(得分：0)
上述两个答案看起来都很复杂，当然（我想）现在必须有一个非常流畅的方法来实现这一点，现在在Bootstrap 4.1中 - 它的2018年！ 好吧 - 是啊......如果你看一下startbootstrap.com的一些模板，网上有一些有趣的答案。
我没有看到与上述有很大不同的东西......
在滚动/页面加载中添加或删除类...
var o = function() {
var mn = $("#mainNav");
mn.offset().top > 100 ? mn.addClass("navbar-shrink") : mn.removeClass("navbar-shrink");
};
o(), $(window).scroll(o);
然后根据附加的类设置样式...
#mainNav {
background-color: #0f6f56;
transition: all 1s ease;
}
#mainNav.navbar-shrink {
background-color: pink;
}