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

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

固定边栏滚动特效

                
                远人
            Web前端工程师

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

最热最新

于梦中

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
以茜为贵 04:19

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技术实现（下）
2016-03-03
jk7 15:07

加载和改变大小时，手动触发scroll事件

查看全部

0 采集收起来源：技术实现
2016-03-02
jk7 12:52

具体代码

查看全部

0 采集收起来源：技术实现
2016-03-02
序梦 08:04

滚动条

查看全部

0 采集收起来源：技术实现
2016-03-02
以茜为贵 05:40

实现的关键点

查看全部

0 采集收起来源：技术实现
2016-03-02
qq_岁月_2

实现关键点 1、css position fixed 2、监听window上的滚动事件 3、设置fixed条件判断滚动高度+屏幕高度(屏幕的可视区)》边栏高度 <div id="J_Bdside" class="side" > <script src="https://code.jquery.com/jquery.js"></script> <script> var jwindow = $(window); 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-screenHeight), 'right':0 }); }else{ $('#J_BdSide').css({ 'position':'static' }); } }); window.onload = function(){ jwindow.trigger('scroll'); }; jwindow.resize(function(){ jwindow.trigger('scroll'); }); </script>

查看全部

0 采集收起来源：技术实现
2018-03-22
qq_岁月_2

<div id="J_Bdside" class="side" >

查看全部

0 采集收起来源：技术实现
2018-03-22
qq_岁月_2

实现关键点 1、css position fixed

查看全部

0 采集收起来源：技术实现
2016-03-02
序梦 02:08

div不随着移动

查看全部

0 采集收起来源：技术实现
2016-03-01
UFO2015 02:00

任远: renren

查看全部

0 采集收起来源：效果演示
2016-02-29
渐入佳境的水货 15:02

trigger("滚动事件") -- window.onload & window.resize

查看全部

0 采集收起来源：技术实现
2018-03-22
渐入佳境的水货 12:45

固定边栏滚动特效

查看全部

0 采集收起来源：技术实现
2016-02-26
Captor 05:43

实现关键点：固定边栏滚动特效

查看全部

0 采集收起来源：技术实现
2016-02-26
Captor 12:55

javascript的代码实现固定边栏滚动特效

查看全部

0 采集收起来源：技术实现
2016-02-26

首页上一页 2 3 4 5 6 7 8 下一页尾页

0/150

提交

取消

开始学习

课程须知: 在学习本案例之前，您最好具备HTML、CSS、JavaScript、jQuery这几个方面技能。

老师告诉你能学到什么？: 通过JavaScript、jQuery实现固定边栏特效，提升技术熟练度，增强技能应用水平。

微信扫码，参与3人拼团

热搜

最近搜索清空

固定边栏滚动特效