固定边栏滚动特效_学习笔记

首页免费课固定边栏滚动特效笔记

固定边栏滚动特效

                
                远人
            Web前端工程师

                    查看讲师更多课程 
                    远人讲师的其他课程
                
电商网站前端架构
中级·101321
免费课程
                                
CSS Sprite雪碧图应用
初级·47102
免费课程
                                
认识响应式布局
中级·132133
免费课程
                                
Fiddler工具使用
中级·63508
免费课程
                                
                难度初级
            
                时长31分
            
                学习人数
            
综合评分9.73
                            93人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.6
                                逻辑清晰

最热最新

qweqwe13123123 15:06

3.添加页面加载跟页面窗口调整是调用 trigger 出发 scroll页面滚动事件

查看全部

0 采集收起来源：技术实现
2016-09-22
qweqwe13123123 13:57

2.用jq实现的代码。

查看全部

0 采集收起来源：技术实现
2016-09-22
qweqwe13123123 05:51

1.实现步骤

查看全部

0 采集收起来源：技术实现
2016-09-22
我要成为前端大姐大

要求三个要素： 1：网页的实际高度，也就是offsetHeight. 2：当前浏览器窗口可视区域高度（眼睛所看到的区域），也就是clientHeight. 3：滚动条移动的距离，也就是 srollHeight. 当某个条件达到触发的时候（滚动的距离+ 可视区

查看全部

0 采集收起来源：JavaScript技术实现（下）
2016-08-19
Amy多多

<script type="text/javascript"> var jwindow=$(windown); jwindow.scroll(function(){ var scrollHeight=jwindow.scrollTop(); var screenHeight=jwindow.height(); var sideHeight=$("#j_Bdside").height(); if(scrollHeight+screenHeight>sideHeight){ $("#j_Bdside").css({ 'position':'fixed', 'top':-(sideHeight-windowHeight), 'right':0; }) }else{ $('#j_Bdside').css({ 'position':'static' }) } }) window.onload=function(){ jwindow.trigger("scroll"); } jwindow.resize(function(){ jwindow.trigger("scroll"); }) </script>

查看全部

0 采集收起来源：JavaScript技术实现（上）
2018-03-22
霜花似雪 05:21

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'; object.style.cssText='';可以设置多个样式，第一次看到 mark 要求三个要素： 1：网页的实际高度，也就是offsetHeight. 2：当前浏览器窗口可视区域高度（眼睛所看到的区域），也就是clientHeight. 3：滚动条移动的距离，也就是 srollHeight. 当某个条件达到触发的时候（滚动的距离+ 可视区高度 > 网页实际高度），触发固定属性；同样当窗口resize的时候，也要判断一次。兼容问题： var screenHeight =document.documentElement.clientHeightdocument.body.clientHeight; //可视区高度，宽度也是一样的。 var pageHeight=obj.offsetHeight; //网页实际高度 var scrollHeight = document.documentElement.scrollTopdocument.body.scrollTop; //获取滚动条滚动的高度，也可以说是距离网页实际高度的原点的高度。

查看全部

0 采集收起来源：JavaScript技术实现（下）
2018-03-22
霜花似雪 04:40

绑定事件 addEvent var addEvent=function(obj,event,fn){ if(obj.addEventListener) { //非IE浏览器 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE obj.attachEvent('on'+evebt,fn); } }

查看全部

0 采集收起来源：JavaScript技术实现（上）
2016-07-13
霜花似雪 15:06

JavaScript代码实现

查看全部

0 采集收起来源：技术实现
2016-07-13
霜花似雪 05:30

多次用到的对象最好事先定义在一个变量里：var jWindow = $(window); 首先获取窗口滚动高度、屏幕可视区域的高度、以及右边栏的高度。 jWindow.scrollTop();jWindow.height();('#side').height(); 然后在条件满足时设置右边栏的position fixed属性以及相应的top right值。 * top为负值 = -(有边栏高度-屏幕可见区域高度) 1、css:position:fixed; 2、监听window上的滚动事件； 3、设置fixed条件判断滚动高度+屏幕高度>边栏高度;

查看全部

0 采集收起来源：技术实现
2018-03-22
霜花似雪

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'); });

查看全部

0 采集收起来源：技术实现
2018-03-22
沉风chen 05:36

滚动高度+屏幕高度>右侧边栏高度

查看全部

0 采集收起来源：技术实现
2018-03-22
黑白K 12:56

不跟随滚动具体代码

查看全部

0 采集收起来源：技术实现
2016-06-26
墮落雙魚 09:44

计算高度

查看全部

0 采集收起来源：技术实现
2016-06-18
qq_米老头_0 05:37

实现关键点

查看全部

0 采集收起来源：技术实现
2016-04-04
于梦中 04:33

绑定事件 addEvent var addEvent=function(obj,event,fn){ if(obj.addEventListener) { //非IE浏览器 obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ //IE obj.attachEvent('on'+evebt,fn); } }

查看全部

0 采集收起来源：JavaScript技术实现（上）
2016-03-18