JS固定边栏滚动
实现关键点
1、 CSS position fixed：作用把边栏做一个固定
还要在设置一下位置，因为脱离文档流之后，会向左侧浮动，所以要设置相对浏览器右侧的距离。
2、监听window上的滚动事件
3、设置fixed条件判断的依据：滚动高度 + 屏幕高度 > 边栏高度
使用jquery实现
1 <script src="https://code.jquery.com/jquery.js"></script><!--引入这种格式的js文件是引入的外部的js文件，就是绝对引用。只是存储的位置是互联网--> 2 3 <script> 4 5 var jWindow = $(window);//获取window窗体 6 7 jWindow.scroll(functoin) {//实现业务逻辑操作 8 9 var scrollHeight = jWindow.scrollTop(); 10 11 var screeHeight = jWindow.height(); 12 13 var sideHeight = $('#J_BdSide').Height(); 14 15 if(scrollHeight + screeHeight > sideHeight) { 16 17 $('#J_BdSide').css({ 18 19 'position':'fixed', 20 21 'top':-(sideHeight-screenHeight),//top取负值 22 23 'right':0 24 25 }); 26 27 }else { 28 29 $('#J_BdSide').css({ 30 31 'position':'static' 32 33 }); 34 35 } 36 37 }); 38 39 window.onload(function() {//刷新页面不变 40 41 jWindow.trigger('scroll');//使用trigger触发scroll事件 42 43 });//监听window的onload事件 44 45 jWindow.resize(function(){//改变窗口大小不变 46 47 jWindow.trigger('scroll'); 48 49 });//监听resize事件 50 51 </script>
另一种方法js
1 <script> 2 3 var $ = function(id) { 4 5 return document.getElementById(id); 6 7 } 8 9 var addEvent = function(obj,event,fn) {//元素对象名字，绑定事件,触发的回调函数 10 11 if(obj.addEventListener) { 12 13 obj.addEventListener(event,fn,false); 14 15 }else if(obj.attachEvent) { 16 17 obj.attachEvent('on'+event,fn); 18 19 } 20 21 }//事件绑定元素 22 23 var domSide = $('J_BdSide'); 24 25 var scrollEvent = function() { 26 27 var sideHeight = domSider.offsetHeight;//获取边栏高度 28 29 var screeHeight = document.documentElement.clientHeight || document.body.clientHeight;//获取可见屏幕高度 30 31 var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//屏幕滚动高度 32 33 if(scrollHeight + screeHeight > sideHeight) { 34 35 domSider.style.cssText = 'position:fixed;right:0px;top:'+(-(sideHeight-screenHeigh))+'px' ';<!--/*dom操作必须加上px和top取反*/--> 36 37 }else { 38 39 domSider.style.position='static', 40 41 } 42 43 }//scroll事件做一次封装 44 45 addEvent(window,'scroll',function(){ 46 47 scrollEvent(); 48 49 }); 50 51 addEvent(window,'resize'function(){<!--把scroll事件做一次封装--> 52 53 scrollEvent(); 54 55 }); 56 57 58 59 </script>
HTML DOM addEventListener() 方法
测试能不能调用函数