-
jq方法。查看全部
-
1、固定右侧边栏实现关键点：
① CSS position fixed属性
② 监听window上的滚动事件
③ 右侧边栏设置fixed条件判断：滚动高度 + 屏幕高度 > 右侧边栏高度
2、使用jQuery为我们部署在服务器上的地址： <script src="https://code.jquery.com/jquery.js"></script>
3、① 多次用到的对象最好事先定义在一个变量里：var jWindow = $(window);//获取window对象
② jWindow.scroll(function(){ }//给window对象绑定滚动事件
③ var scrollHeight=jWindow.scrollTop();//窗口滚动的高度
④ var screenHeight=jWindow.height();//屏幕可视区域的高度
⑤ var sideHeight=$('#side').height();//右侧边栏的高度
4、部分关键代码： if(scrollHeight+screenHeight>sideHeight){ $('#side').css({ 'top':-(sideHeight-screenHeight),//如果设成'top':0,就会跳到右侧边栏的最顶端 'right':0 }); }else{ $('#side').css({ 'position':'static';//position的默认取值是static }); }
部分关键代码： window.onload=function (){ jWindow.trigger('scroll');//触发window滚动的事件 }; jWindow.resize(function (){ jWindow.trigger('scroll'); });
查看全部 -
1.封装 取id 2.封装浏览器兼容查看全部
-
JS方法获取高度： 边栏真实高度：domSider.offsetHeight； 屏幕可见区域高度:document.documentElement.clietHeight || document.body.clientHeight; 屏幕滚动高度：document.documentElement.scrollTop || document.body.scrollTop; 设置多个CSS属性的方法：domSider.style.cssText = 'position:fixed;right:0;top:'+(-(sideHeight-screenHeight))+'px';查看全部
-
多次用到的对象最好事先定义在一个变量里：var jWindow = $(window); 首先获取窗口滚动高度、屏幕可视区域的高度、以及右边栏的高度。 jWindow.scrollTop();jWindow.height();('#side').height(); 然后在条件满足时设置右边栏的position fixed属性以及相应的top right值。 * top为负值 = -(有边栏高度-屏幕可见区域高度)查看全部
-
要注意的position : static ; //默认是static查看全部
-
兼容问题： var screenHeight =document.documentElement.clientHeight||document.body.clientHeight; //可视区高度，宽度也是一样的。 var pageHeight=obj.offsetHeight; //网页实际高度 var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop; //获取滚动条滚动的高度，也可以说是距离网页实际高度的原点的高度。查看全部
-
要求三个要素： 1：网页的实际高度，也就是offsetHeight. 2：当前浏览器窗口可视区域高度（眼睛所看到的区域），也就是clientHeight. 3：滚动条移动的距离，也就是 srollHeight. 当某个条件达到触发的时候（滚动的距离+ 可视区高度 > 网页实际高度），触发固定属性； 同样当窗口resize的时候，也要判断一次。查看全部
-
object.style.cssText='';可以设置多个样式，第一次看到 mark查看全部
-
文档加载、窗口改变大小要重新定位查看全部
-
var windowHeight = $(window).scrollTop() + $(window).height(); //窗口滚动高度+屏幕可视高度查看全部
-
固定边栏滚动特性查看全部
-
固定边栏滚动特性查看全部
-
发现js中的cssText它的作用的替换，显然，当滚动高度+浏览器可见高度大于侧边栏高度时，案例中用了cssText="position:fixed;right:0;bottom:0;"是有问题的，因为它替换了原本为侧边栏设置的宽度width:33%;这样就造成侧边栏的宽度出现变化。后面就css就只有position:static;right:0;bottom:0;没有了宽度查看全部
-
绑定事件函数搭建！！！！查看全部
举报