带有子菜单和平滑滚动的粘性导航 [英] sticky navigation with submenu and smooth scroll
本文介绍了带有子菜单和平滑滚动的粘性导航的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
任何帮助将感谢...
这是我目前的HTML
< nav class = navbar navbar-default navbar-fixed-toprole =navigation>
< div class =container>
< div class =row>
< div class =navbar-header>
< button class =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =icon icon-bar>< / span>
< span class =icon icon-bar>< / span>
< span class =icon icon-bar>< / span>
< / button>
< a href =#class =navbar-brand>< h3> TEST NAV LOGO< / h3>< / a>
< / div>
< div class =collapse navbar-collapse>
< ul class =nav navbar-nav navbar-right>
< li>< a href =#homeclass =smoothScroll> HOME< / a>< / li>
< li>< a href =#aboutclass =smoothScroll> ABOUT< / a>< / li>
< li>< a href =#teamclass =smoothScroll> TEAM< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
这是CSS
.navbar-default {
background:#FFFFFF;
border:none;
box-shadow:0px 2px 8px 0px rgba(50,50,50,0.08);
保证金:0!重要;
}
.navbar-default .navbar-brand {
color:#0066cc;
height:65px;
line-height:40px;
padding-left:0px;
margin-LEFT:-10;
width:100px;
FLOAT:正确;
}
.navbar-default .navbar-brand h3 {
font-weight:bold;
}
.navbar-default .navbar-nav li a {
color:#ff0000;
font-weight:bold;
height:65px;
line-height:30px;
FONT-SIZE:14.5px;
}
.navbar-default .navbar-nav li a:hover {
color:#0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav> li> a:focus {
color:#0066cc;
}
.navbar-default .navbar-toggle {
margin-top:16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#66AF33;
颜色:#FFFFFF;
}
.navbar-default .navbar-nav> .active> a,.navbar-default .navbar-nav> .active> a:hover,.navbar-default .navbar-nav> .active> a:focus {
color:#0066cc;
background-color:transparent;
}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
background-color:#FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
解决方案
您可以尝试以下代码:
$ b $
$(document).scroll(function(){
if($(this).scrollTop()> ; 150){
$('。navbar')。css('position','fixed');
$('。navbar')。css('top','0');
}
else {
$('。navbar').css('position','static');
}
});
以上代码 150 为虚拟值,您可以尝试一个数字根据您的要求。
OR
试试这个链接: http://www.backslash.gr/demos/jquery-sticky-navigation/
Im a beginner in hmtl css jquery js..
I have a navigation that is sticky but can not add sub menu to navigation, also if sub menu is created i want the navigation to stay sticky. Is that possible? Any help would to thanks... Here is my current html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><h3>TEST NAV LOGO</h3></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="smoothScroll">HOME</a></li>
<li><a href="#about" class="smoothScroll">ABOUT</a></li>
<li><a href="#team" class="smoothScroll">TEAM</a></li>
</ul>
</div>
</div>
</div>
Here is the CSS
.navbar-default {
background: #FFFFFF;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand {
color: #0066cc;
height: 65px;
line-height: 40px;
padding-left: 0px;
margin-LEFT: -10;
width:100px;
FLOAT: right;
}
.navbar-default .navbar-brand h3 {
font-weight: bold;
}
.navbar-default .navbar-nav li a {
color: #ff0000;
font-weight: bold;
height: 65px;
line-height: 30px;
FONT-SIZE: 14.5px;
}
.navbar-default .navbar-nav li a:hover {
color: #0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav > li > a:focus {
color: #0066cc;
}
.navbar-default .navbar-toggle {
margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #66AF33;
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #0066cc;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
}
解决方案
You can try below code:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
Here in above code 150 is dummy value you can try a number as per your requirement.
OR
Try this link : http://www.backslash.gr/demos/jquery-sticky-navigation/
这篇关于带有子菜单和平滑滚动的粘性导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文