Javascript 在固定标题上平滑滚动
如何使用平滑滚动创建jQuery固定标题。有2个菜单栏，但我想顶部蓝色的平滑滚动固定。我还需要宽度：100%；有固定的位置，但这样做后一切都会改变 结果还显示了一些垂直的蓝线和“文本8”，这损害了菜单栏Javascript 在固定标题上平滑滚动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何使用平滑滚动创建jQuery固定标题。有2个菜单栏，但我想顶部蓝色的平滑滚动固定。我还需要宽度：100%；有固定的位置，但这样做后一切都会改变 结果还显示了一些垂直的蓝线和“文本8”，这损害了菜单栏 //纳沃米； 如果（应固定&&！已固定）{ 导航.css({ 位置：'固定'， 排名：0， }); isFixed=true； } 否则如果（！shouldBeFixed&&isFixed） { 导航.css({ 位置：“静态” }); isFixed=false； } }); }); //
//纳沃米；
如果（应固定&&！已固定）{
导航.css({
位置：'固定'，
排名：0，
});
isFixed=true；
}
否则如果（！shouldBeFixed&&isFixed）
{
导航.css({
位置：“静态”
});
isFixed=false；
}
});
});
//]]>
#艾巴布滴{
高度：49px；
背景色：#0093DE；
z指数：1000；
文本对齐：左对齐；
宽度：1150px；
左边距：-32px；
}
.tabs内部.widget ul#icbabdrop{
文本对齐：左对齐；
显示：内联；
保证金：0；
填充：15px 4px 17px 0；
列表样式：无；
边界：无；
}
.tabs内部.widget ul#icbabdrop li{
字体大小：12px；
颜色：#fff；
字体系列：无衬线；
/*菜单的字体*/
显示：内联块；
右边距：-4px；
高度：49px；
页边顶部：-1px；
填充：15px 10px；
左边距：0px；
光标：指针；
-webkit转换：所有0.2秒；
-moz转换：全部为0.2s；
-ms转换：均为0.2s；
-o-过渡：均为0.2s；
过渡：均为0.2s；
文本对齐：左对齐；
浮动：左；
}
.tabs内部.widget ul#icbabdrop li a{
填充：0；
字体系列：无衬线；
/*菜单链接的字体*/
边界：0；
颜色：#fff；
字体大小：粗体；
}
.tabs内部.widget ul#icbabdrop li:悬停{
背景：#fff；
/*滚动菜单标题时的背景色*/
颜色：#0093DE；
/*滚动菜单标题时的字体颜色*/
}
.tabs内部.widget ul#icbabdrop li:将鼠标悬停在a上{
背景：透明；
高度：49px；
颜色：#0093DE；
/*滚动菜单标题时的字体颜色*/
}
.tabs内部.widget ul#icbabdrop li ul{
z指数：1000；
边界：无；
填充：0；
位置：绝对位置；
顶部：45px；
左：30px；
浮动：无；
宽度：150px；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
显示：无；
不透明度：0；
可见性：隐藏；
-webkit transiton：不透明度0.2s；
-moz转变：不透明度0.2s；
-ms转换：不透明度0.2s；
-o-转变：不透明度0.2s；
-过渡：不透明度0.2s；
}
.tabs内部.widget ul#icbabdrop li ul li{
背景:#555；
/*子菜单项的背景色*/
显示：块；
颜色：#fff；
/*子菜单项的字体颜色*/
文本阴影：0-1px0#000；
}
icbabdrop li ul li a{
颜色：#fff/*链接子菜单项的颜色*/
}
.tabs内部.widget ul#icbabdrop li ul li：悬停{
背景:#666；
/*滚动子菜单项时的背景色*/
}
.tabs内部.widget ul#icbabdrop li:悬停ul{
显示：块；
不透明度：1；
能见度：可见；
}
.搜索顶部{
利润上限：-8px；
浮动：顶部；
文本对齐：左对齐；
右边距：10px；
列表样式类型：无；
}
.导航栏标题左侧{
浮动：左；
高度：50px；
线高：40px；
宽度：200px；
页边顶部：-5px；
}
#黑菜单{
背景：#203545；
宽度：1150px；
框大小：边框框；
高度：26px；
文本对齐：左对齐；
浮动：左；
溢出：隐藏；
利润上限：-35px；
左边距：-30px；
}
.秒菜单{
字体：普通13px开放式无压缩字体、Arial字体、无衬线字体；
填充：0；
背景：#203545；
保证金：0自动；
溢出：隐藏；
}
.秒导航菜单{
列表样式类型：无；
保证金：0；
填充：0；
}
.sec导航菜单li{
显示：内联块；
文本转换：大写；
填充：1px 0 1px 20px；
线高：16px；
位置：相对位置；
}
.秒导航菜单李a{
颜色：#fff；
文字装饰：无；
边缘底部：5px；
}
.sec导航菜单li a：悬停{
文字装饰：下划线；
}
.名称容器下的程序{
字体：斜体；
字母间距：-.4px；
左侧填充：-1px；
左边距：10px；
浮动：对；
文本对齐：右对齐；
字体大小：12px；
}
.bold{
字号：600
}
.绿色{
颜色：#6aab0c！重要
}
#顶级标志{
利润上限：-25px；
}
#搜索表{
背景：#0093DE；
浮动：对；
左边距：50像素；
利润上限：-10px；
高度：36px；
宽度：220px；
文本对齐：右对齐；
浮动：对；
}
#搜索表单表{
宽度：100%；
保证金：0；
}
#搜索表格td.search-box{
右侧填充：30px；
}
#搜索表单输入#搜索框[type=“text”]{
背景：#ffffff；
高度：36px；
线高：36px；
保证金：5px0 5px10px；
填充：0 10px；
宽度：99%；
颜色：#666666；
边界：无；
}
#搜索表单输入#搜索按钮[type=“submit”]{
字体系列：Fontsome；
背景：#FF4F4F；
颜色：#ffffff；
高度：36px；
线高：36px；
保证金：5px10px 5px0；
填充：0 12px；
边界：无；
大纲：无；
-o-过渡：均为0.25s；
-moz转换：所有0.25秒；
-webkit转换：所有0.25秒；
}
#搜索表单输入#搜索按钮[type=“submit”]：悬停{
背景：#22222；
光标：指针；
}
#搜索表单输入#搜索框[type=“text”]：焦点{
背景：#eee；
大纲：无；
}
#职位{
边缘顶部：50px；
高度：150vh；
}
-
<!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>
<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>