jQuery侧边栏随窗口滚动实现方法


Posted in Javascript onMarch 04, 2013
$(function() {
    var $sidebar   = $("#sidebar"),   
        $window    = $(window),   
        offset     = $sidebar.offset(),   
        topPadding = 15;       $window.scroll(function() {   
        if ($window.scrollTop() > offset.top) {   
            $sidebar.stop().animate({   
                marginTop: $window.scrollTop() - offset.top + topPadding   
            });   
        } else {   
            $sidebar.stop().animate({   
                marginTop: 0   
            });   
        }   
    });   
});
Javascript 相关文章推荐
javascript中的一些注意事项 更新中
Dec 06 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
js 控制下拉菜单刷新的方法
Mar 03 #Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 #Javascript
javascript重复绑定事件造成的后果说明
Mar 02 #Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 #Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 #Javascript
You might like
php 获取远程网页内容的函数
2009/09/08 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
Javascript this指针
2009/07/30 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
tensorflow 查看梯度方式
2020/02/04 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python中的测试框架
2020/11/13 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物