侧边栏固定定位的应用
以京东为例：示例图以及背景图
问题：
1：用image-position取图。略
2：position：fixed固定定位。
3：完成动画，使用jquery库。
思路：
定位：如果使用left，当改变浏览器大小时会出现差错，所以采用right=0。
布局：如果只用一张背景图做的话，当鼠标移入时，改变width的值，背景图片的position值，添加文本，及背景颜色，文本， 颜色，发现由于宽度的变大，在取图片时会显示其它背景，所以不采用此方法。
将文本放在一个div里，首先设置定位将其隐藏，背景图片放在一个div里，鼠标移入图片，显示文本并且鼠标移入文本仍显示，所以事件对象不可设为背景图片所在div,应为两个div的父元素，即设置一个div将其包围，在父元素设置鼠标事件，且不可设宽度。
动画：使用定时器，因为鼠标移入移出，如果频率过快，会不断触发。
html:
<div id="bar"> <div id="bar_1"><a id='jd_hy' href="#">京东会员</a><div id="img_1"></div></div> <div id="bar_2"><a id='gw_c' href="#">购物车 </a><div id="img_2"></div></div> <div id="bar_3"><a id='my_gz' href="#">我的关注</a><div id="img_3"></div></div> <div id="bar_4"><a id='my_zj' href="#">我的足迹</a><div id="img_4"></div></div> <div id="bar_5"><a id='my_xx' href="#">我的消息</a><div id="img_5"></div></div> <div id="bar_6"><a id='zx_jm' href="#">咨询JIMI</a><div id="img_6"></div></div> <!-- 回到顶部 --> <div id="bar_7"><span id='hd_top' href="#">顶部</span><div id="img_7"></div></div> <div id="bar_8"><a id='fk' href="#">反馈</a><div id="img_8"></div></div> </div>
css:
#bar_1,#bar_2,#bar_3,#bar_4,#bar_5,#bar_6,#bar_7,#bar_8{
height: 35px;
position: fixed;
right: 0;
cursor: pointer;
background: red;
z-index: 100;/*设置层次居于最高*/
}
#img_1,#img_2,#img_3,#img_4,#img_5,#img_6,#img_7,#img_8{
border-radius: 5px 0 0 5px;
width: 30px;
height: 35px;
line-height: 35px;
color: #fff;
background-color: #7A6E6E;
position: fixed;
font-size: 12px;
right: 0;
background-image: url('image/toolbars.png');
cursor: pointer;
}
#jd_hy,#gw_c,#my_gz,#my_zj,#my_xx,#zx_jm,#hd_top,#fk{
right: 0;
font-size: 12px;
display: block;
text-align: center;
width: 75px;
height: 35px;
line-height: 35px;
color: #fff;
position: fixed;
cursor: pointer;
}
/*京东会员*/
#bar_1{
/*不要设置宽度或者设为背景的宽度*/
top: 220px;
}
#img_1{
top: 220px;
background-position: -90px -174px;
}
#jd_hy{
top: 220px;
}
/*购物车*/
#bar_2{
top: 256px;
}
#img_2{
top: 256px;
background-position: 410px 0px;
}
#gw_c{
top: 256px;
}
/*我的关注*/
#bar_3{
top: 292px;
}
#img_3{
top: 292px;
background-position: 410px -48px;
}
#my_gz{
top: 292px;
}
/*我的足迹*/
#bar_4{
top: 328px;
}
#img_4{
top: 328px;
background-position: 410px -99px;
}
#my_zj{
top: 328px;
}
/*我的消息*/
#bar_5{
top: 364px;
}
#img_5{
top: 364px;
background-position: 268px -148px;
}
#my_xx{
top: 364px;
}
/*咨询JIMI*/
#bar_6{
top:400px;
}
#img_6{
top: 400px;
background-position:410px -148px ;
}
#zx_jm{
top: 400px;
}
/*回到顶部*/
#bar_7{
bottom: 36px;
}
#img_7{
bottom: 36px;
background-position: 410px -250px;
}
#hd_top{
bottom: 36px;
}
/*反馈*/
#bar_8{
bottom: 0;
}
#img_8{
bottom: 0;
background-position: 410px -298px;
}
#fk{
bottom: 0;
}
js:
由于高度是固定的当浏览器大小改变时，要随浏览器做出变化。
// 改变浏览器大小侧边栏top变化
window.onresize = function(){
var height = document.documentElement.clientHeight||document.body.clientHeight;
var top_1 = (height-35)/2+'px'; //将第一个居中
var top_2 = parseInt(top_1)+36+'px';
var top_3 = parseInt(top_2)+36+'px';
var top_4 = parseInt(top_3)+36+'px';
var top_5 = parseInt(top_4)+36+'px';
var top_6 = parseInt(top_5)+36+'px';
$("#bar_1,#jd_hy,#img_1").css('top',top_1);
$("#bar_2,#gw_c,#img_2").css('top',top_2);
$("#bar_3,#my_gz,#img_3").css('top',top_3);
$("#bar_4,#my_zj,#img_4").css('top',top_4);
$("#bar_5,#my_xx,#img_5").css('top',top_5);
$("#bar_6,#zx_jm,#img_6").css('top',top_6);
}
PS:回到顶部：
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop>0){
$('#bar_7').css('display','block');
}else{
$('#bar_7').css('display','none');
}
}
// 用定时器匀减速，让scrollTop逐渐减小
$('#bar_7,#hd_top').bind('click',function(){
var timer = setInterval(function(){
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
var step = scrollHeight/5;
document.documentElement.scrollTop = scrollHeight - step;
if(scrollHeight==0){
clearInterval(timer); //清理定时器
timer = null;
}
},30)
})