jquery - 在过渡中显示背景颜色
问题描述
我试图background-color
用一些动画来展示它,但它突然出现了。我希望导航栏background-color
出现某种动画。
JSFiddle 演示:https ://jsfiddle.net/3f0czkpt/
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix');
} else {
$('.navbar').removeClass('affix');
}
});
body {
padding-top: 50px;
background-color: #eee;
}
.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;
background-color: #000;
-webkit-transition: padding 0.2s linear;
-moz-transition: padding 0.2s linear;
-o-transition: padding 0.2s linear;
transition: padding background-color 0.2s linear;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler navbar-toggler-right" 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="#" tabindex="-1" aria-disabled="true">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>
<section>
<div class="container-fluid">
<h1>Here is some content</h1>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic
lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</div>
</section>
<section>
<div class="container-fluid">
<h1>Here is some more content</h1>
<h1>Here is some content</h1>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic
lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</div>
</section>
解决方案
转换规则属于基类,,.navbar
而不是达到滚动阈值后要附加的类。此外,使用逗号分隔多个转换属性。
body {
padding-top: 50px;
background-color: #eee;
}
.navbar {
transition: padding, background-color 0.2s linear;
}
.affix {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
background-color: #000;
}
这是一个工作演示:jsFiddle
推荐阅读
- python - Python Selenium 无法通过 xpath 在页面上找到元素
- javascript - Why is my for loop stopping before everything is evaluated?
- java - Java中正确使用ForkJoinPool提交和加入
- javascript - 使用 webpack 未加载 Vuejs 组件
- javascript - 为什么 setTimeout 在我的流实现中会有这种行为?
- angular - 无法通过 NgForm 获取内容
- android - For-loop 范围必须有一个 'iterator()' 方法
- python - 将新值附加到其他 for 循环中的现有(反向)字典
- c - 嵌入式软件 - 为什么查找表中需要“const”?
- xamarin - 如何将 .framework 本机引用添加到 Nuget 包