[英]JQuery Smooth Scroll to Anchor with Sticky Navigation Bar
[英]sticky navigation with submenu and smooth scroll
我是hmtl css jquery js的初學者。
我有一個粘性導航,但是不能將子菜單添加到導航中,如果創建了子菜單,我也希望導航保持粘性。 那可能嗎? 任何幫助,謝謝...這是我當前的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>
這是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;
}
您可以嘗試以下代碼:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
在上面的代碼150中,您可以根據需要嘗試輸入一個虛擬值。
要么
試試這個連結: http : //www.backslash.gr/demos/jquery-sticky-navigation/
例
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.