如何使用 WOW.js 和 BS3 为固定 div 设置动画而无需滚动到顶部答案

【问题标题】：How to animate fixed div without having to scroll to top with WOW.js and BS3如何使用 WOW.js 和 BS3 为固定 div 设置动画而无需滚动到顶部
【发布时间】：2015-07-07 09:37:30
【问题描述】：

我正在使用 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 会自动转到顶部，但是如果您在更新时快速向下滚动，问题就会变得可见。

【问题讨论】：

标签： javascript html css twitter-bootstrap-3 wow.js

【解决方案1】：

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

我使用 jQuery 检查页面是否没有滚动到顶部并向项目添加一个类：

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

然后我添加了以下 CSS：

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

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

【讨论】：