HTML5开发项目实战：侧边栏固定
知识点：
1.事件处理（滚动事件）
2.获取滚动的高度
3.获取元素的高度
4.使用JS操作CSS改变样式
5.absolute定位方式
侧边栏固定-JQuery方法:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var Getid=function(id){
return document.getElementById(id);
}
var addEvent=function(obj,event,fun){
if(obj.addEventListener){
obj.addEventListener(event,fun,false);
}else if(obj.attachEvent()){
obj.attachEvent("on"+event,fun);
}
}
var InSider=Getid("lesson-nav");
addEvent(window,"scroll",function(){
var scrollHeight=document.body.scrollTop;
//console.log(scrollHeight);
var contentHeight=Getid("changeid").offsetHeight-InSider.offsetHeight;//获取的滚动的高度
//console.log(contentHeight);
if(scrollHeight>253 && scrollHeight<contentHeight+253){
InSider.style.position="absolute";
InSider.style.left="0px";
insider.style.top=scrollHeight-253 +"px";
}else if(scrollHeight<=253){
insider.style.position="absolute";
insider.style.left="0px";
insider.style.top="0px";
}
});
</script>
</body>
</html>
侧边栏固定-JQuery方法:
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var jWindow=$(window);
jWindow.scroll(function(){
var scrollHeight=jWindow.scrollTop();
var contentHeight=$("#changeid").height()-$(".lesson-nav").height();
// console.log(scrollHeight+"---"+contentHeight);
if(scrollHeight >253 && scrollHeight<contentHeight+253){
$(".lesson-nav").css({
position:"absolute",
left:"0px",
top:scrollHeight-253 +"px"
});
}else if{
position:"absolute",
left:"0px",
top:"0px"
}
})
</script>
</body>
</html>
网友评论