javascript - 滚动后更改标题的容器

标签 javascript jquery html css twitter-bootstrap

我有以下 Bootstrap 3 header 。 我该怎么做才能在向下滚动时将容器类更改为 .container-fluid？ 向上滚动到最后，再次成为 .container。

我的 js 知识还不是很丰富，如果有任何帮助，我将不胜感激。

  $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
    } else {
        $('.sticky-navbar').removeClass('sticky');
    }
});
#nav {
    margin-bottom: 0px;
    z-index: 999;
    position: relative;
}
.navbar-default {
    background-color: #fff;
    box-shadow: 0 0px 5px rgba(215, 215, 215, 0.65);
}
.navbar-default .navbar-nav > .active>a {
    color: rgb(7, 105, 203);
    border-bottom: 1px rgba(0, 51, 102, 0.25) solid;
    background-color: #fff;
}
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #003366;
}
.navba-inverse .navbar-nav>.active>a:focus {
    color: #fff;
}
.navbar-brand {
    padding: 15px 0;
    margin-left: 0 !important;
}
.sticky-navbar {
    background-color: #fff;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
    height: auto;
}
.sticky-navbar.sticky {
    background-color: rgba(255, 255, 255, 0.9);
    height: auto;
    transition: background-color .5s ease 0s;
}
.navbar-right {
    float: right!important;
    padding: 30px;
}
.navbar-inverse .navbar-nav>li>a {
    background-color: transparent;
    font-size: 16px;
    padding: 18.5px 16px;
    color: #474747;
    letter-spacing: normal;
    text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a:before {
content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffa804;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
.navbar-inverse .navbar-nav>li>a:hover {
    color:#fff;
    text-decoration:none;
}
.navbar-inverse .navbar-nav>li>a.active {
    color: #bb2a2d;
}
.navbar-inverse .navbar-nav-alt>li>a {
    color: #000;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: transparent;
}
ul.custom-pull {
    margin-top: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
        <div class="header-top">
           <div class="container text-right">
                <a href="" class="btn btn-warning">
                    Open Account
                </a>
                <a href="" class="btn btn-outline">
                    Login
                </a>
                    <div class="chat_wrapper">
                        <a href=""></a>
                    </div><!-- chat-wrapper -->
           </div><!-- header-top .container -->
       </div><!-- header-top -->
       
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="index.html">Logo</a><!-- !logo! -->
            </div><!-- navbar header -->
            <div class="collapse navbar-collapse" id="navMain">
                <ul class="nav navbar-nav pull-right custom-pull">
                    <li><a href="#l">Advantage</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Software</a>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About us</a>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Partner</a>
                </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact</a>
                </li>
            </ul><!-- !main-menu! -->
            </div><!-- collapse -->
      </div><!-- navbar container -->
    </div><!-- navbar -->
    
    <body>
    <section>
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ullamcorper mauris, in scelerisque lorem feugiat eu. Etiam eget magna vel nibh placerat maximus quis id ligula. Morbi id congue urna. Donec vel accumsan lorem, eget sagittis purus. Donec in condimentum quam, ut blandit mi. Duis maximus fermentum diam. Nulla scelerisque nec tellus at sodales. Etiam euismod turpis vitae turpis porttitor, vitae malesuada libero fringilla. Mauris faucibus nisi et dolor lobortis volutpat.

Etiam et neque ultrices, faucibus risus non, eleifend neque. Phasellus feugiat luctus imperdiet. Morbi egestas luctus libero, a auctor nisi imperdiet nec. Vivamus id nisl finibus, imperdiet tellus vitae, molestie tellus. Mauris gravida arcu non metus rutrum ultrices. Sed eu egestas dolor. Sed blandit congue ornare. Cras tristique, libero non ultrices auctor, erat lectus interdum ipsum, at rhoncus justo urna non nunc.

Donec a aliquet leo. Morbi ante magna, scelerisque quis consequat porttitor, aliquam eu neque. Ut eu malesuada magna. Aliquam lobortis mi mollis turpis ornare tempor. Pellentesque et accumsan turpis. Praesent egestas lacinia arcu, ut pretium metus facilisis sit amet. Cras pharetra non tellus id sagittis.

Mauris feugiat diam a lacinia vulputate. Suspendisse potenti. In bibendum, tortor et dictum ornare, velit nulla mattis erat, ut laoreet mi eros eu augue. Nulla facilisi. Integer sed nibh mattis, malesuada est non, hendrerit purus. Nullam ac dui urna. Maecenas nec dui convallis dui luctus auctor id ac sem. Duis aliquam lorem orci, non pellentesque neque facilisis feugiat. Cras ornare, nulla quis gravida mattis, est magna venenatis diam, ac sagittis mauris nunc ac quam. Proin sodales vestibulum accumsan. Mauris tellus turpis, blandit id consectetur at, pulvinar a ipsum. Aenean iaculis tempor sem vitae finibus. Duis vel sem lorem. Phasellus condimentum odio id nunc placerat, id bibendum felis aliquet. Phasellus rutrum lectus ultrices vestibulum cursus. Mauris in ligula velit.

Mauris feugiat diam a lacinia vulputate. Suspendisse potenti. In bibendum, tortor et dictum ornare, velit nulla mattis erat, ut laoreet mi eros eu augue. Nulla facilisi. Integer sed nibh mattis, malesuada est non, hendrerit purus. Nullam ac dui urna. Maecenas nec dui convallis dui luctus auctor id ac sem. Duis aliquam lorem orci, non pellentesque neque facilisis feugiat. Cras ornare, nulla quis gravida mattis, est magna venenatis diam, ac sagittis mauris nunc ac quam. Proin sodales vestibulum accumsan. Mauris tellus turpis, blandit id consectetur at, pulvinar a ipsum. Aenean iaculis tempor sem vitae finibus. Duis vel sem lorem. Phasellus condimentum odio id nunc placerat, id bibendum felis aliquet. Phasellus rutrum lectus ultrices vestibulum cursus. Mauris in ligula velit.

Aliquam erat volutpat. Donec ut mauris ut enim posuere accumsan et non mi. Vivamus volutpat porttitor sagittis. Maecenas eget urna elit. Pellentesque sit amet faucibus est. Praesent a lorem id felis ullamcorper hendrerit. Maecenas egestas mi felis, id condimentum ante malesuada ut. Nunc quis quam eget urna blandit blandit. Sed facilisis, eros ac eleifend blandit, velit mauris euismod arcu, et imperdiet magna libero nec nibh. Suspendisse faucibus libero suscipit, sollicitudin metus accumsan, porttitor diam. Donec non neque nisl. Phasellus tempus commodo ante, quis auctor mi.</p>
        </div>
      </div>
    </section>

最佳答案

使用这个

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
        $('.navbar .container').addClass('container-fluid', 1000, "easeInOutQuad" );
        $('.navbar .container').removeClass('container', 1000, "easeInOutQuad" );
    } else {
        $('.sticky-navbar').removeClass('sticky');
        $('.navbar .container-fluid').addClass('container', 1000, "easeInOutQuad" );
        $('.navbar .container-fluid').removeClass('container-fluid', 1000, "easeInOutQuad" );
    }
});


$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.sticky-navbar').addClass('sticky');
        $('.navbar .container').addClass('container-fluid', 1000, "easeInOutQuad" );
        $('.navbar .container').removeClass('container', 1000, "easeInOutQuad" );
    } else {
        $('.sticky-navbar').removeClass('sticky');
        $('.navbar .container-fluid').addClass('container', 1000, "easeInOutQuad" );
        $('.navbar .container-fluid').removeClass('container-fluid', 1000, "easeInOutQuad" );
    }
});
#nav {
    margin-bottom: 0px;
    z-index: 999;
    position: relative;
}
.navbar-default {
    background-color: #fff;
    box-shadow: 0 0px 5px rgba(215, 215, 215, 0.65);
}
.navbar-default .navbar-nav > .active>a {
    color: rgb(7, 105, 203);
    border-bottom: 1px rgba(0, 51, 102, 0.25) solid;
    background-color: #fff;
}
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #003366;
}
.navba-inverse .navbar-nav>.active>a:focus {
    color: #fff;
}
.navbar-brand {
    padding: 15px 0;
    margin-left: 0 !important;
}
.sticky-navbar {
    background-color: #fff;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
    height: auto;
}
.sticky-navbar.sticky {
    background-color: rgba(255, 255, 255, 0.9);
    height: auto;
    transition: background-color .5s ease 0s;
}
.navbar-right {
    float: right!important;
    padding: 30px;
}
.navbar-inverse .navbar-nav>li>a {
    background-color: transparent;
    font-size: 16px;
    padding: 18.5px 16px;
    color: #474747;
    letter-spacing: normal;
    text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a:before {
content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffa804;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
.navbar-inverse .navbar-nav>li>a:hover {
    color:#fff;
    text-decoration:none;
}
.navbar-inverse .navbar-nav>li>a.active {
    color: #bb2a2d;
}
.navbar-inverse .navbar-nav-alt>li>a {
    color: #000;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: transparent;
}
ul.custom-pull {
    margin-top: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>

<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
        <div class="header-top">
           <div class="container text-right">
                <a href="" class="btn btn-warning">
                    Open Account
                </a>
                <a href="" class="btn btn-outline">
                    Login
                </a>
                    <div class="chat_wrapper">
                        <a href=""></a>
                    </div><!-- chat-wrapper -->
           </div><!-- header-top .container -->
       </div><!-- header-top -->
       
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="index.html">Logo</a><!-- !logo! -->
            </div><!-- navbar header -->
            <div class="collapse navbar-collapse" id="navMain">
                <ul class="nav navbar-nav pull-right custom-pull">
                    <li><a href="#l">Advantage</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Software</a>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About us</a>
                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Partner</a>
                </li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact</a>
                </li>
            </ul><!-- !main-menu! -->
            </div><!-- collapse -->
      </div><!-- navbar container -->
    </div><!-- navbar -->
    
    <body>
    <section>
      <div class="container">
        <div class="row">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor ullamcorper mauris, in scelerisque lorem feugiat eu. Etiam eget magna vel nibh placerat maximus quis id ligula. Morbi id congue urna. Donec vel accumsan lorem, eget sagittis purus. Donec in condimentum quam, ut blandit mi. Duis maximus fermentum diam. Nulla scelerisque nec tellus at sodales. Etiam euismod turpis vitae turpis porttitor, vitae malesuada libero fringilla. Mauris faucibus nisi et dolor lobortis volutpat.

Etiam et neque ultrices, faucibus risus non, eleifend neque. Phasellus feugiat luctus imperdiet. Morbi egestas luctus libero, a auctor nisi imperdiet nec. Vivamus id nisl finibus, imperdiet tellus vitae, molestie tellus. Mauris gravida arcu non metus rutrum ultrices. Sed eu egestas dolor. Sed blandit congue ornare. Cras tristique, libero non ultrices auctor, erat lectus interdum ipsum, at rhoncus justo urna non nunc.

Donec a aliquet leo. Morbi ante magna, scelerisque quis consequat porttitor, aliquam eu neque. Ut eu malesuada magna. Aliquam lobortis mi mollis turpis ornare tempor. Pellentesque et accumsan turpis. Praesent egestas lacinia arcu, ut pretium metus facilisis sit amet. Cras pharetra non tellus id sagittis.

Mauris feugiat diam a lacinia vulputate. Suspendisse potenti. In bibendum, tortor et dictum ornare, velit nulla mattis erat, ut laoreet mi eros eu augue. Nulla facilisi. Integer sed nibh mattis, malesuada est non, hendrerit purus. Nullam ac dui urna. Maecenas nec dui convallis dui luctus auctor id ac sem. Duis aliquam lorem orci, non pellentesque neque facilisis feugiat. Cras ornare, nulla quis gravida mattis, est magna venenatis diam, ac sagittis mauris nunc ac quam. Proin sodales vestibulum accumsan. Mauris tellus turpis, blandit id consectetur at, pulvinar a ipsum. Aenean iaculis tempor sem vitae finibus. Duis vel sem lorem. Phasellus condimentum odio id nunc placerat, id bibendum felis aliquet. Phasellus rutrum lectus ultrices vestibulum cursus. Mauris in ligula velit.

Mauris feugiat diam a lacinia vulputate. Suspendisse potenti. In bibendum, tortor et dictum ornare, velit nulla mattis erat, ut laoreet mi eros eu augue. Nulla facilisi. Integer sed nibh mattis, malesuada est non, hendrerit purus. Nullam ac dui urna. Maecenas nec dui convallis dui luctus auctor id ac sem. Duis aliquam lorem orci, non pellentesque neque facilisis feugiat. Cras ornare, nulla quis gravida mattis, est magna venenatis diam, ac sagittis mauris nunc ac quam. Proin sodales vestibulum accumsan. Mauris tellus turpis, blandit id consectetur at, pulvinar a ipsum. Aenean iaculis tempor sem vitae finibus. Duis vel sem lorem. Phasellus condimentum odio id nunc placerat, id bibendum felis aliquet. Phasellus rutrum lectus ultrices vestibulum cursus. Mauris in ligula velit.

Aliquam erat volutpat. Donec ut mauris ut enim posuere accumsan et non mi. Vivamus volutpat porttitor sagittis. Maecenas eget urna elit. Pellentesque sit amet faucibus est. Praesent a lorem id felis ullamcorper hendrerit. Maecenas egestas mi felis, id condimentum ante malesuada ut. Nunc quis quam eget urna blandit blandit. Sed facilisis, eros ac eleifend blandit, velit mauris euismod arcu, et imperdiet magna libero nec nibh. Suspendisse faucibus libero suscipit, sollicitudin metus accumsan, porttitor diam. Donec non neque nisl. Phasellus tempus commodo ante, quis auctor mi.</p>
        </div>
      </div>
    </section>

关于javascript - 滚动后更改标题的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49976692/

上一篇：css - 为什么 Angular Material 选择溢出屏幕

下一篇：javascript - 将两项相乘，结果在第三项中自行生成

相关文章：

php - WooCommerce 购物车 Hook 'woocommerce_cart_contents' 在错误的位置显示内容

HTML/CSS IE7 z-index 错误

javascript - ie7循环图像问题

javascript - 如何对齐html？

javascript - 如何在 react 组件构造函数中设置间隔？

jquery - 如果可能，使用 AJAX 从 URL 获取 JSON 数据

javascript - 理解 Promise.all

jquery - 在页面导航时使用 jQuery BlockUI 插件(卸载事件)

javascript - Canvas 中的动画不连贯

css - 内容不留在 div 内

©2024 IT工具网  联系我们