如何使用 WOW.js 和 BS3 动画固定 div 而不必滚动到顶部

Question

我正在使用 WOW.js 为固定在顶部的导航栏制作动画 navbar-fixed-top。不幸的是，如果我已经粘贴到顶部，导航栏将不会动画，直到我再次转到页面顶部。

有没有办法强制包含菜单的特定部分无论如何都设置动画？

HTML

<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>

代码显示在这里：https://jsfiddle.net/DTcHh/7108/

此处显示示例：http://fiddle.jshell.net/DTcHh/7108/show/light/

不幸的是，刷新页面时 JSFiddle 会自动转到顶部，但如果您在更新时快速向下滚动，问题就会变得明显。

Answer 1

我遇到了同样的问题，我建立了一个粗略的解决方案：

使用 jQuery 我检查一下，如果页面没有滚动到顶部并向项目添加 Class:

$(document).ready(function(){
    if($(".navbar").offset().top > 0) {
        $('.navbar .wow').each(function(){
            $(this).addClass('menu-fix');
        });
    }
});

然后我添加了以下内容 CSS:

.navbar .menu-fix {
    visibility: visible !important;
}

这不是一个干净的解决方案，但它有效。

如何使用 WOW.js 和 BS3 动画固定 div 而不必滚动到顶部

How to animate fixed div without having to scroll to top with WOW.js and BS3

html

javascript

css

twitter-bootstrap-3

wow.js