JS实现网页上随滚动条滚动的层效果代码

本文实例讲述了JS实现网页上随滚动条滚动的层效果代码。分享给大家供大家参考，具体如下：
这款网页上随滚动条滚动层代码，拖动滚动条即可看到效果，对联广告的代码也都是基于此的，右侧的浮动层同样是可以关闭的稍微加工，便可实现一个浮动广告的代码，运行一下，先看效果吧。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/
具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>随滚动条滚动的层</title><style>body{ margin:0; padding:0; font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;}div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,form{ margin:0; padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}img{ border:0;}ol,ul{list-style:none;}a{ text-decoration:none; color:#fff;}a:hover{ text-decoration:none;}#scroll_div{ width:100px; height:400px; background:#990; }#btn_close,#btn_gotop{ cursor:pointer;}</style></head><body><div style=" width:1002px;height:42px;margin:0 auto; background-color:#060;">头</div><div style="width:1002px; margin:0 auto; background-color:#f60;">我们提供各类编程源码、<br>素材、书籍教程、设计模板、<br>网页特效代码以及常用软件下载等，<br>做有质量的<br>学习型源码下载站。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div style=" width:1002px;height:95px;margin:0 auto; background-color:#060;">底</div><div id="scroll_div"><span id="btn_close">关闭</span><br /><span id="btn_gotop">返回顶部</span></div><script type="text/javascript">var Bianyuan = { //添加事件2（DOM-保证this指向对象是obj） addEvent : function（obj, type, fn）{if （obj.attachEvent）{ obj["e"+type+fn] = fn; obj[type+fn] = function（）{obj["e"+type+fn]（window.event）;} obj.attachEvent（"on"+type, obj[type+fn]）;}else{ obj.addEventListener（type, fn, false）;} }, //获取id元素 $ : function（id）{return document.getElementById（id）; }, //取得浏览器可视区size getBrowserSize : function（）{var pageWidth = window.innerWidth, pageHeight = window.innerHeight;if （typeof pageWidth ！= "number"）{ if （document.compatMode == "CSS1Compat"）{pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight; } else{pageWidth = document.body.clientWidth;pageWidth = document.body.clientHeight; }}//ie减去17滚动条宽度if（！window.ActiveXObject）{ pageWidth -= 17;}return { width : pageWidth, height : pageHeight} }, //获取滚动条高度 getPageScroll : function（）{ var yScroll; if （self.pageYOffset） {yScroll = self.pageYOffset; } else if （document.documentElement && document.documentElement.scrollTop）{yScroll = document.documentElement.scrollTop; } else if （document.body） {yScroll = document.body.scrollTop; } return yScroll;}}function scrollBar（scrollId, dir, headHeight, footHeight, areaWidth, o）{ //滚动框宽高 var scrollBar = Bianyuan.$（scrollId）,barWidth = scrollBar.offsetWidth,barHeight = scrollBar.offsetHeight; //可视区宽高 var pageWidth = Bianyuan.getBrowserSize（）.width,pageHeight = Bianyuan.getBrowserSize（）.height; //内容宽高 var widthMore = document.documentElement.scrollWidth,heightMore = document.body.scrollHeight||（document.documentElement.scrollHeight）; //最大宽高 var maxWidth = Math.max（pageWidth, widthMore）,maxHeight = Math.max（pageHeight, heightMore）; scrollBar.style.position = "absolute"; //设置top--假设滚动框高度小于整个页面高度，如果大于直接将其隐藏 if （maxHeight < （barHeight + footHeight + footHeight + 4））{scrollBar.style.display = "none"; }else{//不挡顶部---如果想改距顶高度，改下边的第一个2值scrollBar.style.top = Bianyuan.getPageScroll（） + headHeight + 2 + "px";//不挡底部if （（heightMore - Bianyuan.getPageScroll（） - barHeight） <= footHeight）{ scrollBar.style.top = heightMore - footHeight - barHeight - 2 + "px";} } //无视主体内容-左右 if （dir == "left" && areaWidth == 1）{scrollBar.style.left = 2 + "px"; }else if （dir == "right" && areaWidth == 1）{scrollBar.style.left = maxWidth - barWidth - 2 + "px"; //根据主体内容宽-左右 }else if （dir == "left" && areaWidth ！= 1）{if （pageWidth >= （barWidth*2 + areaWidth + 4））{ scrollBar.style.left = （pageWidth - areaWidth）/2 - barWidth - 2 + "px";}else{ scrollBar.style.left = 2 + "px";} }else if （dir == "right" && areaWidth ！= 1）{if （pageWidth >= （barWidth*2 + areaWidth + 4））{ scrollBar.style.left = （pageWidth - areaWidth）/2 + areaWidth + 2 + "px";}else{ scrollBar.style.left = maxWidth - barWidth - 2 + "px";} } //关闭和返回顶部 if （o）{if （o.btnClose）{ var closeBtn = Bianyuan.$（o.btnClose）; Bianyuan.addEvent（closeBtn, "click", function（）{scrollBar.style.display = "none"; }）}if （o.goTop）{ var gotopBtn = Bianyuan.$（o.goTop）; Bianyuan.addEvent（gotopBtn, "click", function（）{document.documentElement.scrollTop = 0;document.body.scrollTop = 0; }）} } //改变窗口大小或滚动条滚动 resizeWindow（scrollId, dir, headHeight, footHeight, areaWidth, o）;}function resizeWindow（scrollId, dir, headHeight, footHeight, areaWidth, o）{ window.onresize = function（）{scrollBar（scrollId, dir, headHeight, footHeight, areaWidth, o）;} window.onscroll = function（）{scrollBar（scrollId, dir, headHeight, footHeight, areaWidth, o）;}}</script><script type="text/javascript">scrollBar（"scroll_div", "right", 42, 95, 1002, {btnClose:"btn_close",goTop:"btn_gotop"}）;</script></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。