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

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

固定边栏滚动特效

                
                远人
            Web前端工程师

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

最热最新

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
qq_慕设计656363

position : static ; //默认是static 要求三个要素： 1：网页的实际高度，也就是offsetHeight. 2：当前浏览器窗口可视区域高度（眼睛所看到的区域），也就是clientHeight. 3：滚动条移动的距离，也就是 srollHeight. 当某个条件达到触发的时候（滚动的距离+ 可视区高度 > 网页实际高度），触发固定属性；同样当窗口resize的时候，也要判断一次。 object.style.cssText='';可以设置多个样式绑定事件 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); } }

查看全部

1 采集收起来源：JavaScript技术实现（下）
2018-03-22
白小明 05:16

老师写的兼容性事件chuli可能不全 addHandler : function (element,type,listener) { if (element.addEventListener) { // 2级 DOM element.addEventListener(type, listener, false); } else if (element.attachEvent) { // IE element.attachEvent('on' + type, listener); } else { // 0级 DOM // element.onclick === element['onclick'] // 在这里由于.与'on'字符串不能链接，只能用后者 element['on' + type] = listener; } }

查看全部

1 采集收起来源：JavaScript技术实现（上）
2017-03-01
阿強

<div id="box1"></div> <div id="box2"> <div id="box2_child"></div> </div> <div id="box3"></div> 如何让box2_child在父容器里定位呢？

查看全部

0 采集收起来源：JavaScript技术实现（下）
2018-03-22
陌羽蕲moyuqi 05:39

实现关键点

查看全部

0 采集收起来源：技术实现
2014-12-10
qq_米老头_0 05:37

实现关键点

查看全部

0 采集收起来源：技术实现
2016-04-04
风之界

说的很有道理

查看全部

0 采集收起来源：效果演示
2018-03-22
亅毛毛醬園滾滾 04:37

两个方法封装。getById.事件绑定函数。ie只支持冒泡，所以非IE的addEventListener的第三个参数false，

查看全部

0 采集收起来源：JavaScript技术实现（上）
2018-03-22
亅毛毛醬園滾滾 15:05

当窗口改变大小时，主动触发scroll事件。$(window).resize(fn(){

查看全部

0 采集收起来源：技术实现
2018-03-22
亅毛毛醬園滾滾 12:50

$(window).height() = clientHeight.

查看全部

0 采集收起来源：技术实现
2018-03-22
于梦中 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
于梦中

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
慕婉清5962438 15:05

jquery实现固定边栏滚动特效

查看全部

0 采集收起来源：技术实现
2014-12-04
慕婉清5962438 03:49

position：fixed使页面脱离文档流之后，后面加top：0px，right:0px; 页面恢复原来的样子！

查看全部

0 采集收起来源：技术实现
2014-12-04
慕婉清5962438 03:12

position：fixed；使淘宝页面脱离文档流

查看全部

0 采集收起来源：技术实现
2014-12-04