Javascript 如何使用WOW.js和BS3制作固定div动画,而不必滚动到顶部
我正在使用WOW.js设置导航栏的动画,导航栏固定在顶部,导航栏固定在顶部。不幸的是,如果我已经粘贴顶部,导航栏将不会被设置动画,直到我再次转到页面顶部 有没有一种方法可以强制菜单中的特定部分在任何情况下都设置动画 HTMLJavascript 如何使用WOW.js和BS3制作固定div动画,而不必滚动到顶部,javascript,html,css,twitter-bootstrap-3,wow.js,Javascript,Html,Css,Twitter Bootstrap 3,Wow.js,我正在使用WOW.js设置导航栏的动画,导航栏固定在顶部,导航栏固定在顶部。不幸的是,如果我已经粘贴顶部,导航栏将不会被设置动画,直到我再次转到页面顶部 有没有一种方法可以强制菜单中的特定部分在任何情况下都设置动画 HTML <div class="container"> <div class="navbar navbar-default navbar-fixed-top wow fadeInDown"> <div class="navba
<div class="container">
<div class="navbar navbar-default navbar-fixed-top wow fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
</ul>
</li>
<li><a href="http://getbootstrap.com/css">CSS</a></li>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
</ul>
</div>
</div>
</div>
-
代码如下所示:
示例如下所示:
不幸的是,当页面刷新时,JSFIDLE会自动进入顶部,但是如果在更新时快速向下滚动,问题就会显现出来。我也遇到了同样的问题,我构建了一个粗略的解决方案: 使用jQuery,我检查,如果页面没有滚动到顶部,则向项目添加一个类:
$(document).ready(function(){
if($(".navbar").offset().top > 0) {
$('.navbar .wow').each(function(){
$(this).addClass('menu-fix');
});
}
});
然后我添加了以下CSS:
.navbar .menu-fix {
visibility: visible !important;
}
这不是一个干净的解决方案,但它是有效的