jquery pagescroller实现左侧导航滚动网页定位效果
代码语言:html
所属分类:加载滚动
代码描述:jquery pagescroller实现左侧导航滚动网页定位效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* download by http://www.codefans.net */
html {
height: 100%;
}
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, table, a, img {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
body {
height: 100%;
font-family: 'Open Sans', 'Helvetica Neue', Arial sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background: #eee;
}
ol, ul {
display: block;
list-style: none;
}
a, a:focus, input, textarea {
outline: none;
}
a, a:link, a:visited {
color: blue;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#wrapper {
position: relative;
width: 100%;
overflow: hidden;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#main {
width: 960px;
position: relative;
overflow: visible;
margin: 0 auto 140px;
padding: 0;
/*padding: 0 0 70px; sticky footer */
background: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}
.section {
min-height: 500px;
padding: 40px;
}
.topNav {
position: fixed !important;
width: 100%;
top: 0;
left: 0;
height: 65px;
background: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .3);
}
.topNav.dark {
background: #000;
background: rgba(0, 0, 0, .92);
border-bottom: 4px solid #222;
}
.topNav ul {
position: relative;
overflow: hid.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0