如何使用平滑滚动创建jQuery固定标头。有2个菜单栏，但我想要顶部蓝色固定与光滑滚动。我还需要宽度：100％;在固定位置但是这样做之后一切都会改变。
结果还显示了一些垂直的蓝线以及＃34; Text 8＆＃34;那是伤害菜单栏的。
//<![CDATA[
$(function() {
var nav = $('#icbabdrop');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
#icbabdrop {
height: 49px;
background-color: #0093DE;
z-index: 1000;
text-align: left;
width: 1150px;
margin-left: -32px;
}
.tabs-inner .widget ul#icbabdrop {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: none;
}
.tabs-inner .widget ul#icbabdrop li {
font-size: 12px;
color: #fff;
font-family: sans-serif;
/* Font for the menu */
display: inline-block;
margin-right: -4px;
height: 49px;
margin-top: -1px;
padding: 15px 10px;
margin-left: 0px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
text-align: left;
float: left;
}
.tabs-inner .widget ul#icbabdrop li a {
padding: 0;
font-family: sans-serif;
/* Font for the menu links */
border: 0;
color: #fff;
font-weight: bold;
}
.tabs-inner .widget ul#icbabdrop li:hover {
background: #fff;
/* background colour when you roll over a menu title */
color: #0093DE;
/* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
background: transparent;
height: 49px;
color: #0093DE;
/* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li ul {
z-index: 1000;
border: none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float: none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
background: #555;
/* background colour of the sub menu items */
display: block;
color: #fff;
/* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a {
color: #fff/* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
background: #666;
/* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.search-top {
margin-top: -8px;
float: top;
text-align: left;
margin-right: 10px;
list-style-type: none;
}
.navbar-header-left {
float: left;
height: 50px;
line-height: 40px;
width: 200px;
margin-top: -5px;
}
#black-menu {
background: #203545;
width: 1150px;
box-sizing: border-box;
height: 26px;
text-align: left;
float: left;
overflow: hidden;
margin-top: -35px;
margin-left: -30px;
}
.sec-menu {
font: normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding: 0 0;
background: #203545;
margin: 0 auto;
overflow: hidden;
}
.sec-nav-menu {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sec-nav-menu li {
display: inline-block;
text-transform: uppercase;
padding: 1px 0 1px 20px;
line-height: 16px;
position: relative;
}
.sec-nav-menu li a {
color: #fff;
text-decoration: none;
margin-bottom: 5px;
}
.sec-nav-menu li a:hover {
text-decoration: underline;
}
.program-below-name-container {
font-style: italic;
letter-spacing: -.4px;
padding-left: -1px;
margin-left: 10px;
float: right;
text-align: right;
font-size: 12px;
}
.bold {
font-weight: 600
}
.green, .green a {
color: #6aab0c!important
}
#top-logo {
margin-top: -25px;
}
#search-form {
background: #0093DE;
float: right;
margin-left: 50px;
margin-top: -10px;
height: 36px;
width: 220px;
text-align: right;
float: right;
}
#search-form table {
width: 100%;
margin: 0 0 0 0;
}
#search-form td.search-box {
padding-right: 30px;
}
#search-form input#search-box[type="text"] {
background: #ffffff;
height: 36px;
line-height: 36px;
margin: 5px 0 5px 10px;
padding: 0 10px;
width: 99%;
color: #666666;
border: none;
}
#search-form input#search-button[type="submit"] {
font-family: FontAwesome;
background: #FF4F4F;
color: #ffffff;
height: 36px;
line-height: 36px;
margin: 5px 10px 5px 0;
padding: 0 12px;
border: none;
outline: none;
-o-transition: all 0.25s;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
}
#search-form input#search-button[type="submit"]:hover {
background: #222222;
cursor: pointer;
}
#search-form input#search-box[type="text"]:focus {
background: #eee;
outline: none;
}
#post {
margin-top: 50px;
height: 150vh;
}<div id='wrapper'>
<div class='tabs-outer'>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'></div>
<div class='region-inner tabs-inner'>
<div class='tabs section' id='crosscol' name='Cross-Column'>
<div class='widget HTML' data-version='1' id='HTML5'>
<div id='icbabdrop'>
<a class='navbar-brand' href='/'><li
class='navbar-header-left'
style='list-style-type:none;'>
<img alt='logo'
src='https://3.bp.blogspot.com/-GZZB4Fretr0/Wtzna9N4keI/AAAAAAAAAMc/IjDcb0KlT-gbFtWB4n_7CuIPbFDWPROKACLcBGAs/s1600/Google_Logo.png'/>
</li>
</a>
<ul id='icbabdrop'>
<li style='margin-left:60px;'><a
href='#?&max-results=8'
rel='nofollow'>Text 1</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 2</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 3</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 4</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 5</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 6</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text
7</a>
</li>
<li><a href='#?&max-results=8'
rel='nofollow'>Text 8</a>
</li>
</ul>
<li class='search-top'>
<form action='/search' id='search-form'
method='get'>
<table>
<tbody>
<tr>
<td class='search-box'>
<input id='search-box'
name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
type='text'
value='Search...'
vinput=''/>
</td>
<td class='search-button'>
<input id='search-button'
type='submit'
value='Go'/>
</td>
</tr>
</tbody>
</table>
</form>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='black-menu'>
<nav class='sec-menu'>
<ul class='sec-nav-menu'>
<li class=''><a href='#'>Black 1</a></li>
<li class=''><a href='#'>Black 2</a></li>
<li class=''><a href='#'>Black 3</a></li>
<li class=''><a href='#'>Black 4</a></li>
<li class=''><a href='#'>Black 5</a></li>
</ul>
</nav>
</div>
<div id='post'>>
Sugar plum muffin cookie pastry oat cake icing candy canes chocolate.
Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream
soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy
marzipan bonbon gummies chocolate cake
gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée
liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly
powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie
roll donut. Gummies ice cream macaroon applicake.
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
答案 0 :(得分：0)
您可以在不使用Javascript的情况下实现此目的：
<强> HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style type="text/css">
img {
max-width: 100%;
}
header {
background-color: #0093DE;
padding: 5px 0px;
transition: all ease .3s;
position: fixed;
width: 100%;
z-index: 999;
top: 0;
left: 0;
}
header .nav {
float: left;
}
header .searchbar {
float: right;
margin-top: 10px;
}
header nav ul {
margin: 10px 0 0 0;
padding: 0;
}
header nav ul li {
display: inline-block;
margin-right: 15px;
}
header nav ul li a {
color: #fff;
}
.sub-nav {
background-color: #203545;
padding: 5px 0px;
}
.sub-nav ul {
padding: 0;
margin: 0;
}
.sub-nav ul li {
display: inline-block;
margin-right: 15px;
}
.sub-nav ul li a {
color: #fff;
}
body {
padding-top: 65px;
}
</style>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="site-logo">
<img src="https://3.bp.blogspot.com/-GZZB4Fretr0/Wtzna9N4keI/AAAAAAAAAMc/IjDcb0KlT-gbFtWB4n_7CuIPbFDWPROKACLcBGAs/s1600/Google_Logo.png" width="200px" />
</div>
</div>
<div class="col-sm-10">
<div class="nav">
<nav>
<ul>
<li><a href="#">text 1</a></li>
<li><a href="#">text 2</a></li>
<li><a href="#">text 3</a></li>
<li><a href="#">text 4</a></li>
<li><a href="#">text 5</a></li>
<li><a href="#">text 6</a></li>
<li><a href="#">text 7</a></li>
<li><a href="#">text 8</a></li>
</ul>
</nav>
</div>
<div class="searchbar">
<input type="text" name="s" placeholder="Search here" />
<button type="submit" class="btn btn-sm">Go</button>
</div>
</div>
</div>
</div>
</header>
<section class="sub-nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<nav>
<ul>
<li><a href="#">black 1</a></li>
<li><a href="#">black 2</a></li>
<li><a href="#">black 3</a></li>
<li><a href="#">black 4</a></li>
<li><a href="#">black 5</a></li>
<li><a href="#">black 6</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<section class="page-content mt-3">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>
<p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>
<p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>
<p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>
<p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>
</div>
</div>
</div>
</section>
</body>
</html>
我使用Bootstrap框架来管理CSS。如果您想使用Javascipt实现此目的，可以添加以下代码：
<强> JS
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if(scrollPos > 100) {
$("body").addClass('static-header');
} else {
$("body").removeClass('static-header');
}
})
})
</script>
希望这可以帮助你。