词缀更改从白色到黑色的平滑导航背景颜色

时间:2017-02-11 06:30:00

标签: jquery html css

以下代码工作正常,我唯一想要实现的是当你向下或向上滚动时,背景平滑,例如从黑色变为红色。 fadein或fadeout。

我如何实现这一目标?

体:

<body data-spy="scroll" data-target=".navbar" data-offset="100">

风格:

body {
    position: relative;
}
.affix {
    top: 0;
    width: 100%;
    -webkit-transition: top 1s ease-in-out;
    -webkit-transition-delay: 0.5s;
    transition: top 1s ease-in-out;
    transition-delay: 0.5s;
    z-index: 9999 !important;
    background: transparent!important;
}
.navbar {
    margin-bottom: 0px;
    border-radius: 0!important;
}
nav {
    top:100px;
    -webkit-transition: top 1s ease-in-out;
    -webkit-transition-delay: 0.5s;
    transition: top 1s ease-in-out;
    transition-delay: 0.5s;
    z-index: 9999 !important;
}
.affix ~ .container-fluid {
    position: relative;
    top: 100px;
}

HTML:

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="0">
<div class="container-fluid">
<div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
        <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="#">Name</a>
</div>


<div class="collapse navbar-collapse js-navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown dropdown-large">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">XXXX<b class="caret"></b></a>

            <ul class="dropdown-menu dropdown-menu-large row">
                <li class="col-sm-2">
                    <ul>
                        <li class="dropdown-header navigatie"><a href="XXXX" title="XXXX">XXXX</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>

1 个答案:

答案 0 :(得分:0)

NSDictionary