我有以下Bootstrap 3标头。
我如何做到这一点，当我向下滚动时，容器类更改为.container-fluid？
滚动到最后，再次成为.container。
我的知识还不是很强，我会感激任何帮助。
$(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>
答案 0 :(得分：1)
使用此
$(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>
答案 1 :(得分：1)
正如你所做的那样：
$(window).scroll(function() {
if($(this).scrollTop() > 50)
{
$('.header-top .container').addClass('container-fluid');
$('.header-top .container').removeClass('container');
$('.sticky-navbar').addClass('sticky');
} else {
$('.header-top .container-fluid').addClass('container');
$('.header-top .container-fluid').removeClass('container-fluid');
$('.sticky-navbar').removeClass('sticky');
}
});
解释：
如果您想添加类，则必须使用addClass功能
所以你必须说出你要添加的类，然后在addClass函数中写出类名
在您的情况下，您想要更改课程，因此您需要使用removeClass功能
这意味着您可以通过当前class 添加其他class找到标记，然后删除当前