当导航栏回到固定位置时使导航栏动画化

Question

如您所见，我制作了一个导航栏，当您向下滚动并成功地使用技巧对其进行动画处理时，该导航栏会粘在页面顶部。事情是当它回到页面顶部时，我无法让它动画。我正在使用 Bootstrap 3

HTML

    <nav id="navigation" class="navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">
                            <img class="img-responsive" alt="Corex" src="images/logo.png">
                        </a>
                    </div>

                    <div class="shopbar pull-right">
                        <a data-toggle="collapse" href="#nav-shop" class="collapsed"> <i class="fa fa-lg fa-shopping-cart"></i> </a>
                        <a data-toggle="collapse" href="#search" class="collapsed"> <i class="fa fa-lg fa-search"></i> </a>
                    </div>

                    <div class="collapse navbar-collapse" id="navbar-collapse-1">

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <div class="dropdown">
                                    <a data-toggle="dropdown" data-target="#" href="#" class="active"> Home <span class="main-text-color light">+</span> </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>home shop</li>
                                        <li>home events</li>
                                        <li>home paralax</li>
                                        <li>home blog</li>
                                        <li>home portfolio</li>
                                        <li>home corporate : v1</li>
                                        <li>home corporate : v2</li>
                                        <li>home corporate : v3</li>
                                        <li>home corporate : v4</li>
                                        <li>home corporate : v5</li>
                                        <li>home corporate : v6</li>
                                        <li>create your own <i class="fa fa-play-circle-o"> </i> </li>
                                    </ul>
                                </div>
                            </li>
                            <li> <a href="#"> Headers <span class="main-text-color light">+</span> </a> </li>
                            <li> <a data-toggle="collapse" href="#uber-menu-1" class="collapsed hover-menu" href="#"> Shortcodes <span class="main-text-color light">+</span> </a> </li>
                            <li> <a href="#"> Features <span class="main-text-color light">+</span> </a> </li>
                            <li> <a href="#"> Blog <span class="main-text-color light">+</span> </a> </li>
                            <li> <a href="#"> Portfolio <span class="main-text-color light">+</span> </a> </li>
                            <li> <a href="#"> Shop <span class="main-text-color light">+</span> </a> </li>
                            <li> <a href="#"> Events <span class="main-text-color light">+</span> </a> </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

CSS

#navigation.navbar-static-top {
    transition: top 1s ease;
    -webkit-transition: top 1s ease;
    -moz-transition: top 1s ease;
    -o-transition: top 1s ease;
    -ms-transition: top 1s ease;
    top: -200px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#navigation.navbar-fixed-top {
    opacity: 0.95;
    transition: top 1s ease;
    -webkit-transition: top 1s ease;
    -moz-transition: top 1s ease;
    -o-transition: top 1s ease;
    -ms-transition: top 1s ease;
    top: 0;
}

#navigation a.navbar-brand {
    line-height: 72px;
    padding: 15px 0;
}

#navigation .navbar-brand img {
    display: inline-block;
}

#navigation li {
    display: inline-block;
    line-height: 103px;
}

#navigation li a {
    font-size: 13px;
    font-weight: 500;
    border-radius: 2px;
    padding: 8px 5px 8px 14px;
    display: inline-block;
}

#navigation a:hover {
    text-decoration: none;
}

JAVASCRIPT

var offset = 220;
var duration = 500;
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('#totop').removeClass('colapsed');
        jQuery('#navigation').addClass('navbar-fixed-top');
        jQuery('#navigation').removeClass('navbar-static-top');

        jQuery('#nav-shop').addClass('fixed-top');
        jQuery('#search').addClass('fixed-top');

    } else {
        jQuery('#totop').addClass('colapsed');
        jQuery('#navigation').removeClass('navbar-fixed-top');
        jQuery('#navigation').addClass('navbar-static-top');

        jQuery('#nav-shop').removeClass('fixed-top');
        jQuery('#search').removeClass('fixed-top');
    }
});

Answer 1

=== 已编辑 ===

极简示例：http://jsfiddle.net/julienvignolles/xwNqu/

使用 Bootstrap，您的导航组件有两种状态：

1. navbar-static-top：在流动中（即不是绝对/固定/相对）
2. navbar-fixed-top：带有position: fixed 和top: 0

动画是从顶部开始的幻灯片。我们只需添加一个具有不同 top 值和 transition: top 1s ease 的类（我们可以将 top 替换为 all 以动画其他属性，如不透明度或其他）。

在向上滚动时，我们删除了 navbar-fixed-top 类。导航栏不再是position: fixed，而是瞬间进入流程。所以，我们不能有隐藏动画。

解决方法是使用第三种状态，就像他们在your example 中所做的那样：

1. navbar-static-top（从顶部滚动 0 到 100 像素）：在流程中
2. navbar-fixed-top（滚动到 100 像素以下）：我们修复了导航栏，但我们没有显示它
3. navbar-move-down（滚动到 220px 下）：我们显示导航栏

注意：#navigation.navbar-static-top 不是必需的，在#navigation 中重命名此规则会更简单。

CSS

#navigation.navbar-fixed-top { 
    /* … */
    top: -100px;
}
#navigation.navbar-show-down {
    top: 0;
}

JAVASCRIPT

var offset_stuck = 100;
var offset_show_down = 220;
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > offset_stuck) {
        jQuery('#navigation').addClass('navbar-fixed-top');
        jQuery('#navigation').removeClass('navbar-static-top');
        // …
    } else {
        jQuery('#navigation').removeClass('navbar-fixed-top');
        jQuery('#navigation').addClass('navbar-static-top');
        // …
    }
    if (jQuery(this).scrollTop() > offset_show_down) {
        jQuery('#navigation').addClass('navbar-show-down');
    } else {
        jQuery('#navigation').removeClass('navbar-show-down');
    }
});

Answer 2

题外话！

当您使用navbar-fixed-top 组件时，您还需要填充您的body（查看大警告）：

http://getbootstrap.com/components/#navbar-fixed-top

CSS

body.navbar-stuck {
  padding-top: 100px;
}

JAVASCRIPT

if (jQuery(this).scrollTop() > offset_stuck) {
    jQuery('body').addClass('navbar-stuck');
    // …
} else {
    jQuery('body').removeClass('navbar-stuck');
    // …
}