使用 Bootstrap 在滚动时设置动画/缩小导航栏

Question

我已经为此搜索了一大堆，但似乎找不到有效的解决方案。基本上，我的 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 &#8211; 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 的。

干杯

Answer 1

引导程序 5（2021 年更新）

Bootstrap 5 仍然有 sticky-top 类，可用于在页面滚动时创建静态到固定的导航栏效果。

Bootstrap 5 stick navbar after scrolling (simply sticky-top)

另一种选择是使用 JavaScript IntersectionObserver。此方法监视“触发”元素。一旦触发器元素在视口中可见，就会将 CSS 类添加到导航栏。这个“卡住”的 CSS 类可以包含更改导航栏样式和位置所需的任何 CSS。

Bootstrap 5 stick navbar after scrolling (animate with IntersectionObserver)

---

引导程序 4（2018 年更新）

Bootstrap 3.x 的滚动导航栏实现的大部分收缩都是使用 Affix 组件来完成的，以更改特定滚动位置的导航栏样式。

但是，在 Bootstrap 4 中添加 has been dropped..

"放弃了 Affix jQuery 插件。我们建议使用位置：sticky polyfill 代替。详见 HTML5 Please entry for details and specific polyfill 建议。”

要在 Bootstrap 4 中创建类似的导航栏效果，您可以通过将 sticky-top 类添加到导航栏来使用 position: sticky（并非所有浏览器都支持）。这可以在导航栏到达顶部时“粘住”导航栏，但不会触发事件以指示它何时“粘住 em>”。因此，当导航栏“卡住”时，需要 JS 更改导航栏样式。

---

现代浏览器支持的一种 JS 方法是IntersectionObserver。当导航栏上方的隐藏触发元素到达视口时（当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

---

最后，如果您知道导航栏需要粘贴的确切位置，您可以使用简单的 jQuery $(window).scroll() 函数...

$(window).scroll(function() {
  /* affix after scrolling 100px */
  if ($(document).scrollTop() > 100) {
    $('.navbar').addClass('affix');
  } else {
    $('.navbar').removeClass('affix');
  }
});

https://codeply.com/go/62Roy6RDOa

---

更多 Bootstrap 4 在滚动示例上更改导航栏样式：
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)

Answer 2

以上两个答案看起来都很长而且很复杂，当然（我认为）现在在 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;
    }

Answer 3

 $(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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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">&copy; 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 类中。