js实现侧边栏滚动+网页中的滚轮分离+固定定位
效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li.active .sidebar-icon-dashboard {
background-position: -18px 0px;
}
#app-first-sidebar nav li .sidebar-icon-dashboard {
background-position: 0px 0px;
}
#app-first-sidebar nav li .sidebar-icon {
position: relative;
top: -1px;
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
background: url(/v2/image/www/sidebar/sidebar-icon-20160530.png) no-repeat;
}
#app-first-sidebar {
position: fixed;
top: 0px;
bottom: 0;
left: 0;
width: 90px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #444;
}
#app-first-sidebar .team-logo-wrap {
display: block;
width: 90px;
height: 63px;
overflow: hidden;
}
#app-first-sidebar nav li.active a {
color: #333;
}
#app-first-sidebar nav li a {
color: #CACACA;
display: block;
padding-left: 18px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
a {
text-decoration: none;
cursor: pointer;
}
#app-first-sidebar nav {
padding: 0 0 60px 0;
width: 90px;
}
ol, ul {
list-style: none;
}
#app-first-sidebar nav li {
font-size: 14px;
height: 36px;
line-height: 36px;
margin-bottom: 14px;
cursor: pointer;
}
#app-first-sidebar .team-logo {
margin: 15px auto 0;
width: 32px;
height: 32px;
border-radius: 16px;
background-size: cover;
background-position: 50% 50%;
background-color: #fff;
}
#app-first-sidebar nav li.active {
background: #F8F8F8;
}
#app-first-sidebar nav li.active {
background: #F8F8F8;
}
#app-first-sidebar nav li:hover a {
color: #fff;
}
li:hover {
background: #666;
}
</style>
</head>
<body>
<div id="app-first-sidebar">
<div id="wheelDelta" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
<a class="team-logo-wrap" href="">
<div class="team-logo" style="background-image: url(http://leanote.com/public/upload/585/57a53b97ab644135ea03f548/images/logo/ef626a3726ca878ec92f6163274c895f.png)">
</div>
</a>
<nav>
<ul class="clearfix">
<li class="active">
<a href="">
<i class="sidebar-icon sidebar-icon-dashboard"></i>
哈哈
</a>
</li>
<li>
<a href="">
<i class="sidebar-icon sidebar-icon-shop"></i>
哈哈
</a>
</li>
<li class="js-guide-goods ">
<a href="l">
<i class="sidebar-icon sidebar-icon-goods"></i>
哈哈
</a>
</li>
<li class="js-guide-trade ">
<a href="trade_dashboard.html">
<i class="sidebar-icon sidebar-icon-order"></i>
哈哈
</a>
</li>
<li class="js-guide-fans ">
<a href="">
<i class="sidebar-icon sidebar-icon-fans"></i>
哈哈
</a>
</li>
<li>
<a href="">
<i class="sidebar-icon sidebar-icon-stat"></i>
哈哈
</a>
</li>
<li>
<a href="">
<i class="sidebar-icon sidebar-icon-asset"></i>
哈哈
</a>
</li>
<li style="margin-top: 44px;">
<a href="">
<i class="sidebar-icon sidebar-icon-app"></i>
哈哈
</a>
</li>
<li class="js-guide-setting ">
<a href="">
<i class="sidebar-icon sidebar-icon-setting"></i>
哈哈
</a>
</li>
<li style="margin-top: 44px;">
<a href="" target="_blank">
<i class="sidebar-icon sidebar-icon-youzan"></i>
呵呵
</a>
</li>
</ul>
</nav>
</div>
</div>
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>1111111111111111111
<br>
</body>
</html>
<script type="text/javascript">
var temp = 0;
var div = document.getElementById("wheelDelta");
div.onmouseover=function(event){
div.onmousewheel=function(e){
e=e || window.event;
var t1=document.getElementById("wheelDelta");
document.onmousewheel=function (){return false};
if(e.wheelDelta){
t1.value = e.wheelDelta;
if(t1.value<0){
temp -= 50;
if(temp<-100) temp=-100;
t1.setAttribute('style', 'transform: translate(0px, '+ temp +'px) translateZ(0px);');
}else{
temp += 50;
if(temp>0) temp=0;
t1.setAttribute('style', 'transform: translate(0px, '+ temp +'px) translateZ(0px);');
}
}
}
}
div.onmouseout =function(event){
document.onmousewheel = function(event) {
event = event || window.event;
};
}
</script>
