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

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

固定边栏滚动特效

                
                远人
            Web前端工程师

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

最热最新

june18th 05:38

固定边栏滚动技术关键点

查看全部

0 采集收起来源：技术实现
2015-08-14
june18th

固定边栏滚动技术关键点

查看全部

0 采集收起来源：技术实现
2015-08-14
june18th

固定边栏滚动技术关键点

查看全部

0 采集收起来源：技术实现
2015-08-14
梦身 04:41

attahevent

查看全部

0 采集收起来源：JavaScript技术实现（上）
2015-08-02
Honghong1223

1、css:position:fixed; 2、监听window上的滚动事件； 3、设置fixed条件判断滚动高度+屏幕高度>边栏高度;

查看全部

0 采集收起来源：技术实现
2018-03-22
努力的开发人员

ie8

查看全部

0 采集收起来源：JavaScript技术实现（上）
2015-05-10
努力的开发人员

i8以前都不考虑

查看全部

0 采集收起来源：JavaScript技术实现（上）
2015-05-10
bizhong 05:48

实现关键点

查看全部

0 采集收起来源：技术实现
2015-04-25
kevinwang 05:37

实现关键

查看全部

0 采集收起来源：技术实现
2015-04-14
凤仪

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.triggle('scroll');//触发window滚动的事件 }; jWindow.resize(function (){ jWindow.triggle('scroll'); });

查看全部

0 采集收起来源：技术实现
2018-03-22
ewall 15:05

jq方法。

查看全部

0 采集收起来源：技术实现
2015-03-31
英宁

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

查看全部

0 采集收起来源：JavaScript技术实现（下）
2015-03-11
英宁

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

查看全部

0 采集收起来源：技术实现
2015-03-11
awcai 07:02

可作为顶栏固定的参考

查看全部

0 采集收起来源：技术实现
2015-02-19
hekie

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

查看全部

3 采集收起来源：JavaScript技术实现（下）
2015-02-26