热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

随窗体滑动的小插件sticky源码

随窗体滑动的小插件sticky源码,需要的朋友可以参考一下

代码如下:

     $.fn.stickyfloat = function(options, lockBottom) {
                var $obj                 = this;
                var parentPaddingTop     = parseInt($obj.parent().css('padding-top'));
                var startOffset         = $obj.parent().offset().top;
                var opts                 = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

                $obj.css({ position: 'absolute' });

                if(opts.lockBottom){
                    var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
                    if( bottomPos <0 )
                        bottomPos = 0;
                }

                $(window).scroll(function () {
                    $obj.stop();

                    var pastStartOffset            = $(document).scrollTop() > opts.startOffset;  
                    var objFartherThanTopPos    = $obj.offset().top > startOffset;  
                    var objBiggerThanWindow     = $obj.outerHeight() <$(window).height();  

                    if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
                        var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
                        if ( newpos > bottomPos )
                            newpos = bottomPos;
                        if ( $(document).scrollTop()                             newpos = parentPaddingTop;

                        $obj.animate({ top: newpos }, opts.duration );
                    }
                });
            };


使用方法很简单:只要在页面中引入该插件,然后用选择器调用:
代码如下:

$('#menu15').stickyfloat({ duration: 500 });
$('#menu14').stickyfloat({ duration: 500 });
$('#menu13').stickyfloat({ duration: 500 });
$('#menu12').stickyfloat({ duration: 500 });

  后面的duration参数表示滑动的速度,越大越慢。


推荐阅读
  • 程序员如何优雅应对35岁职业转型?这里有深度解析
    本文探讨了程序员在职业生涯中如何通过不断学习和技能提升,优雅地应对35岁左右的职业转型挑战。我们将深入分析当前热门技术趋势,并提供实用的学习路径。 ... [详细]
  • ListView简单使用
    先上效果:主要实现了Listview的绑定和点击事件。项目资源结构如下:先创建一个动物类,用来装载数据:Animal类如下:packagecom.example.simplelis ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 本文深入探讨了 Exchange Server 2010 中客户端访问的代理和重定向机制,特别是在跨站点环境中如何配置这些功能以确保用户能够顺利访问邮箱服务。通过详细解析不同场景下的应用,帮助管理员更好地理解和实施相关设置。 ... [详细]
  • 编写css让div2在div1的右下角? ... [详细]
  • 本文介绍了如何通过在数据库表中增加一个字段来记录文章的访问次数,并提供了一个示例方法用于更新该字段值。 ... [详细]
  • Python notes
    6.1.1.执行模块当你用下面的方式运行一个Python模块pythonfibo.py模块中的代码将会被执行,就像导入它一样,不过此时__name__被设置为__main__。 ... [详细]
  • 本文探讨了过度依赖咖啡对生物钟的影响,以及如何合理划分学习和娱乐时间。通过反思,我们认识到即使是快乐的事情也需要适度,培养兴趣爱好应注重沉浸感和心流体验。文章还提供了一些具体的调整建议。 ... [详细]
  • 本文探讨了在使用Gulp进行项目构建时,如何合理设计目录结构以提高开发效率,并确保资源文件(如CSS、JavaScript和图片)的有效管理。 ... [详细]
  • 解决Spring Boot项目创建失败的问题
    在尝试创建新的Spring Boot项目时遇到了一些问题,具体表现为在项目创建过程中的两个关键步骤出现错误。本文将详细探讨这些问题及其解决方案。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文详细解释了涨停板交易(俗称“打板”)的定义、操作步骤及注意事项。涨停板交易是一种高风险高回报的投资策略,尤其在牛市中表现出色。文中不仅介绍了如何选择和买入涨停股票,还提供了三大纪律以规避风险。 ... [详细]
  • Shell脚本中变量操作详解
    本文基于《鸟哥的Linux私房菜》一书,详细介绍了Shell脚本中变量的使用方法,包括变量的赋值规则、字符串处理技巧以及环境变量的管理等,旨在帮助读者更好地理解和使用Shell中的变量。 ... [详细]
  • 使用WinForms 实现 RabbitMQ RPC 示例
    本文通过两个WinForms应用程序演示了如何使用RabbitMQ实现远程过程调用(RPC)。一个应用作为客户端发送请求,另一个应用作为服务端处理请求并返回响应。 ... [详细]
  • iOS 开发技巧:TabBarController 自定义与本地通知设置
    本文介绍了如何在 iOS 中自定义 TabBarController 的背景颜色和选中项的颜色,以及如何使用本地通知设置应用程序图标上的提醒个数。通过这些技巧,可以提升应用的用户体验。 ... [详细]
author-avatar
啵__啵_891
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有