jquery实现带下拉网站顶部固定导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现一个带二级下拉菜单的网站顶部固定导航条效果代码，往下滚动的时候导航条会固定在顶部。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        *,*:after,*:before {
	box-sizing:border-box
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0
}
body,button,input,select,textarea {
	font:12px Arial,Helvetica,sans-serif
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	color:#333;
	font-family:'PingFang SC','微软雅黑','YaHei','黑体','Hei',Tahoma,Helvetica,arial,sans-serif
}
address,cite,dfn,em,var {
	font-style:normal
}
code,kbd,pre,samp {
	font-family:courier new,courier,monospace
}
small {
	font-size:12px
}
ul,ol,li {
	list-style:none
}
a {
	text-decoration:none;
	outline:0
}
a:hover {
	text-decoration:underline
}
sup {
	vertical-align:text-top
}
sub {
	vertical-align:text-bottom
}
legend {
	color:#000
}
fieldset,img {
	border:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
img {
	vertical-align:top;
	display:inline-block;
	background-color:transparent
}
a {
	color:#ff6d01
}
a:hover {
	color:#cd5700
}
p {
	font-size:13px;
	line-height:1.6;
	color:#353535
}
.clearfix {
	*zoom:1
}
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:".";
	clear:both;
	height:0;
	line-height:0;
	overflow:hidden
}
.gradient-primary {
	background-color:#ff6d01;
	background-image:-moz-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:-webkit-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:-ms-linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%);
	background-image:linear-gradient(75deg,#ff7e00 0,#ff3f00 53%,#f00 100%)
}
.ui-btn {
	display:inline-block;
	padding:6px 12px;
	line-height:18px;
	border:1px solid #ff6d01;
	border-radius:3px;
	color:#ff6d01;
	background-color:#fff;
	cursor:pointer;
	vertical-align:middle;
	text-align:center;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s
}
.layout-wrap {
	width:1200px;
	position:relative;
	margin:0 auto
}
.browser-tip p {
	text-align:center;
	color:#fff
}
.mod-topbar {
	height:28px;
	background:#666;
	padding:6px 0;
	font-size:12px;
	line-height:16px;
	color:#a1a1a1;
	position:relative;
	z-index:100
}
.mod-topbar a {
	color:#fff;
	padding:0 10px
}
.mod-topbar .login,.mod-topbar .user-info {
	float:right
}
.mod-topbar .user-info a {
	border-left:1px solid #999
}
.mod-topbar .user-info a:first-child {
	border-left:none
}
.mod-topbar .user-info a:hover {
	color:#fff
}
.mod-header,.mod-header .logo a,.mod-header .logo .logo-img,.mod-header .nav,.mod-header .nav-start-btn {
	-webkit-transition:all .4s;
	-moz-transition:all .4s;
	transition:all .4s
}
.mod-header {
	height:92px;
	background:#fff;
	z-index:1000;
	position:relative
}
.mod-header .logo {
	padding:18px 0;
	width:360px;
	overflow:hidden
}
.mod-header .logo a {
	display:block;
	height:56px;
	text-decoration:none;
	line-height:56px
}
.mod-header .logo .logo-img {
	height:56px;

	vertical-align:middle
}
.mod-header .nav {
	position:absolute;
	right:120px;
	top:0;
	padding:28px 0;
	border-right:1px solid #ececec
}
.mod-header .nav {
	position:absolute;
	right:120px;
	top:0;
	padding:28px 0;
	border-right:1px solid #ececec
}
.mod-header .nav>li {
	float:left;
	position:relative;
	margin:0 5px;
	z-index:1100
}
.mod-header .nav>li>a {
	display:block;
	height:36px;
	padding:6px 10px;
	font-size:15px;
	line-height:24px;
	color:#333;
	text-decoration:none;
	border-radius:24px
}
.mod-header .nav>li.active>a,.mod-header .nav>li.active>a:hover {
	color:#fff;
	background:#ff6d01
}
.mod-header .nav>li>a:hover {
	color:#ff6d01
}
.mod-header .nav .sub-nav {
	opacity:0;
	display:none;
	filter:alpha(opacity=0);
	position:absolute;
	top:104px;
	left:50%;
	margin-left:-70px;
	width:140px;
	border-top:2px solid #ff6d01;
	background:#f9f9f9;
	z-index:1000
}
.mod-header .nav .sub-nav:after {
	content:"";
	color:#f00;
	position:absolute;
	top:-14px;
	left:50%;
	height:6px;
	width:6px;
	margin-left:-6px;
	z-index:1100;
	overflow:hidden;
	border-width:6px;
	border-style:dashed dashed solid;
	border-color:transparent transparent #ff6d01
}
.mod-header .nav .sub-nav>li>a {
	display:block;
	padding:10px 24px;
	font-size:12px;
	text-align:center;
	border-top:1px solid #f1f1f1;
	color:#333;
	text-decoration:none
}
.mod-header .nav .sub-nav>li>a:hover {
	color:#fff;
	background:#ff6d01;
	border-top-color:#ff6d01
}
.mod-header .nav>.new:after {
	content:"新";
	text-align:center;
	line-height:18px;
	position:absolute;
	right:0;
	top:0;
	background:#f00;
	color:#fff;
	width:18px;
	height:18px;
	border-radius:9px
}
.mod-header .nav-start-btn {
	position:absolute;
	right:0;
	top:0;
	padding:12px 20px;
	margin:24px 0;
	font-size:15px;
	color:#fff;
	text-decoration:none
}
.is-fixed.mod-header {
	position:fixed;
	top:0;
	height:56px;
	width:100%;
	background-color:#fff;
	background-color:rgba(255,255,255,0.9);
	border-bottom:1px solid rgba(0,0,0,0.2)
}
.is-fixed.mod-header .logo {
	padding:0 20px
}
.is-fixed.mod-header .logo-img {
	height:39.2px;
	width:68.6px;
	margin-left:30px
}
.is-fixed.mod-header .nav {
	padding:10px 0
}
.is-fixed.mod-header .nav-start-btn {
	margin:6px 0
}
.ui-art,.ui-arb {
	position:relative;
	display:inline-block;
	height:0;
	width:0;
	line-height:0;
	overflow:hidden;
	border-width:4px;
	border-style:dashed dashed solid;
	border-color:transparent
}
*,*:after,*:before {
	box-sizing:border-box
}
.mod-header .nav>li>a {
	display:block;
	height:36px;
	padding:6px 10px;
	font-size:15px;
	line-height:24px;
	color:#333;
	text-decoration:none;
	border-radius:24px
}
.ui-arb {
	border-color:#888 transparent transparent;
	top:2px
}
.ui-arb {
	-webkit-transition:-webkit-transform .2s .2s;
	-moz-transition:-moz-transform .2s .2s;
	transition:transform .2s .2s
}
.ui-arb.open {
	-webkit-transform:translateY(-4px) .........完整代码请登录后点击上方下载按钮下载查看