3

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

4

1 回答 1

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

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

于 2016-10-18T10:06:45.057 回答