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

=== EDITED ===

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

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

navbar-static-top：在流程中（即非绝对/固定/相对）
navbar-fixed-top：position: fixed和top: 0

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

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

工作场所是使用第三种状态，就像在your example中一样：

navbar-static-top（从顶部滚动0到100px）：在流程中
navbar-fixed-top（在100px下滚动）：我们修复了导航栏，但我们没有显示它
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');
    // …
}

当导航栏返回固定位置时，使导航栏具有动画效果

2 个答案: