在使用Bootstrap 4滚动时动画/缩小导航栏 [英] Animate/Shrink NavBar on scroll using Bootstrap 4
问题描述
我已经为此搜索了整个堆，但似乎找不到可行的解决方案。基本上，我的NavBar完美地满足了我的需求。我现在想缩小NavBar，当我的页面向下滚动时，使用漂亮的平滑过渡（动画）使其更加纤细。
这是我当前NavBar的HTML标记：
< header>
< nav class =navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse>
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContentaria-expanded = falsearia-label =切换导航>
< span class =navbar-toggler-icon>< / span>
< / button>
< div class =collapse navbar-collapseid =navbarSupportedContent>
< ul class =navbar-nav ml-auto>
< li class =nav-item active>
< a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>关于< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>投资组合< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>联络人< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =＃>博客< / a>
< / li>
< / ul>
< / div>
< / nav>
< / header>
有什么想法可以实现这个目标？我做了很多搜索，但大多数解决方案都是用于Bootstrap 3的。
干杯
然而，Affix 已从Bootstrap 4中删除。
删除了Affix jQuery插件，我们推荐使用一个位置：粘性
polyfill。请参阅HTML5请输入以获取详细信息和特定的
polyfill建议。
要在Bootstrap 4中创建类似的Navbar效果，您可以使用位置：sticky （所有浏览器都不支持）导航栏中的 sticky-top 类。这适用于当导航栏到达顶部时 stick ，但 不 EM>。因此，JS需要在卡住时更改Navbar样式。
现代浏览器支持的一种JS方法是 IntersectionObserver 。使用它来监视Navbar上方隐藏的触发元素何时到达视口（当卡住应用于 html 元素）。
.stuck .sticky-top {
background-color：＃222;
padding-top：3px;
padding-bottom：3px;
}
Sticky Top Navbar - IntersectionObserver Demo
你也可以用jQuery插件，如 ScrollPos-Styler ，或编写自己的jQuery来控制滚动条上的导航栏样式。 ..
它是如何工作的： code> data-toggle =affix： jQuery观看滚动位置并有条件地切换 使用CSS来操纵词缀（填充/高度，颜色等）： 注意： strong> Bootstrap 4.0.0
$ b
< div class = navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3data-toggle =affix>
< a href =＃class =navbar-brand>品牌< / a>
< a class =navbar-togglerdata-toggle =collapsedata-target =。navbar-collapse>☰< / a>
< ul class =nav navbar-nav>
< li class =nav-item>< a href =＃class =nav-link> ..< / a>
< / li>
< / ul>
< / div>
.affix
$ b $ pre $ var $ toggle $ = $函数（affixElement，scrollElement，包装）{
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'）;
}
};
$ b $ *在任何data-toggle =affix元素上使用toggleAffix * /
$（'[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）;
}）;
html，body {
height：100％;
padding-top：56px; / *固定导航栏的高度* /
}
.navbar {
-webkit-transition：padding 0.2s ease;
-moz-transition：填充0.2s缓解;
-o-transition：填充0.2s缓解;
转换：填充0.2s缓解;
}
.affix {
padding-top：0.2em！important;
填充底部：0.2em！重要;
-webkit-transition：填充0.2s线性;
-moz-transition：填充0.2s线性;
-o-transition：填充0.2s线性;
转换：填充0.2s线性;
}
部分{
min-height：calc（100％ - 70px）;
}
navbar-toggleable - * 改为 navbar-expand - code>
最后，您可以使用简单的jQuery $（window）.scroll ）函数，如果你知道Navbar需要粘贴的确切位置......
$（window）.scroll（function （）{
/ *如果（$（document）.scrollTop（）> 100）{
$（'。navbar'）。addClass（'affix）滚动100px * /
， '）;
} else {
$（'。navbar'）。removeClass（'affix'）;
}
}）;
https://www.codeply.com/go/62Roy6RDOa
更多Bootstrap 4在滚动示例上更改导航栏样式： 相关问题： I've searched a whole heap for this but cant seem to find a working solution. Basically I've got my NavBar perfectly how I want it. I now want to shrink the NavBar when my page scrolls down to make it more slim using a nice smooth transition (animation). This is my HTML markup for my current NavBar: Any ideas how I can achieve this? I've done a lot of searching but most solutions were for Bootstrap 3. Cheers Updated 2018 Most of the shrink on scroll Navbar implementations for 3.x are done using the Affix component to change the style of the navbar at a specific scroll position. However, Affix has been dropped from Bootstrap 4.. "Dropped the Affix jQuery plugin. We recommend using a position: sticky
polyfill instead. See the HTML5 Please entry for details and specific
polyfill recommendations." To create a similar Navbar effect in Bootstrap 4, you can use One JS method supported in modern browsers is Sticky Top Navbar - IntersectionObserver Demo You could also jQuery plugin such as ScrollPos-Styler, or write your own jQuery to control the navbar styles on scroll... How it works: A fixed-top Navbar with jQuery to watch scroll position and conditionally toggle the CSS to manipulate the affix style (padding/height, color, etc..):
Note: As of Bootstrap 4.0.0, the Navbar has changed slightly as Sticky Top Navbar - jQuery Demo Finally, you can use a simple jQuery $(window).scroll() function if you know the exact position of when the Navbar needs to stick... https://www.codeply.com/go/62Roy6RDOa More Bootstrap 4 change Navbar style on scroll examples: Related questions: 这篇关于在使用Bootstrap 4滚动时动画/缩小导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
简单粘贴滚动后（4.0.0）
缩小高度 （4.0.0）
缩小高度（alpha-6）< br>
透明背景 < br>
滚动后更改颜色 a>
修复导航栏滚动顶部
Affix不能在Bootstrap 4 alpha中工作 <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>
position: sticky (not supported in all browsers) by adding the sticky-top class to the Navbar. This works to "stick" the Navbar when it reaches the top, but doesn't trigger an event to indicate when the it's "stuck". Therefore, JS is needed to change the Navbar style when it's "stuck".
IntersectionObserver. Use it to "watch" when a hidden trigger element above the Navbar reaches the viewport (when stuck is applied to the html element)..stuck .sticky-top {
background-color: #222;
padding-top: 3px;
padding-bottom: 3px;
}
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>
.affix class: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);
});
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);
}
navbar-toggleable-* has change to navbar-expand-
$(window).scroll(function() {
/* affix after scrolling 100px */
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix');
} else {
$('.navbar').removeClass('affix');
}
});
simply sticky after scroll (4.0.0)
shrink height (4.0.0)
shrink height (alpha-6)
transparent over background
change color after scroll
Fixing navbar to top on scroll
Affix is not working in Bootstrap 4 alpha
