jquery/js固定边栏滚动效果

最新推荐文章于 2022-07-17 17:44:44 发布

zhuxiajiayou

最新推荐文章于 2022-07-17 17:44:44 发布

阅读量1.3k

点赞数 1

分类专栏： js特效文章标签：固定边栏滚动特效滚动特效固定边栏 jquery js

本文链接：https://blog.csdn.net/zhuxiajiayou/article/details/53146226

版权

js特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery实现固定滚动特效

<head>

</script>

js实现固定滚动特效

<head>
<meta charset="UTF-8">
<title>javascript实现固定右侧边栏滚动特效</title>
<style>
#slide-scroll{
float: left;
width:70%;
background: palegreen;
height: 2000px;
}
#slide-fixed{
float: right;
width:30%;
background: plum;
height: 1000px;
}
</style>
</head>
<body>
<div id="slide-scroll"　></div>
<div id="slide-fixed"></div>
</body>
<script>
/*获取元素的dom引用*/
var $ = function(id){
return document.getElementById(id);
}

/*事件绑定函数*/
var addEvent = function(obj,event,fn){
if(obj.addEventListener){/*w3c标准方法*/
obj.addEventListener(event,fn,false);//非ie浏览器事件模型有2中，捕获事件，冒泡事件（默认false,ie浏览器只支持冒泡模型）
}else if(obj.attachEvent){//ie浏览器
obj.attachEvent("on"+event,fn);//ie浏览器只支持冒泡模型
}
}

var sideDom=$("slide-fixed");
var scrollEvent=function(){
var sideHeight=sideDom.offsetHeight;
var screenHeight=document.documentElement.clientHeight||document.body.clientHeight;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollHeight+screenHeight>sideHeight){
sideDom.style.cssText="position:fixed;right:0px;top:"+(screenHeight-sideHeight)+"px";
}else{
sideDom.style.position="static";
}
}
addEvent(window,"scroll",function(){
scrollEvent();
});
addEvent(window,"resize",function(){
scrollEvent();
})
</script>