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

 更新时间:2013年06月21日 11:44:59   作者:  
随窗体滑动的小插件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() < opts.startOffset )
                            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参数表示滑动的速度,越大越慢。

相关文章

  • JavaScript Cookie显示用户上次访问的时间和次数

    JavaScript Cookie显示用户上次访问的时间和次数

    用cookies记录用户的访问时间与次数,然后再次访问时,在读取。
    2009-12-12
  • js转html实体的方法

    js转html实体的方法

    下面小编就为大家带来一篇js转html实体的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript实现轮播图片完整代码

    JavaScript实现轮播图片完整代码

    这篇文章主要为大家介绍了JavaScript实现轮播图片的完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Javascript 命名空间模式

    Javascript 命名空间模式

    命名空间是通过为项目或库创建一个全局对象,然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量,实现单全局变量,从而在具有大量函数、对象和其他变量的情况下不会造成全局污染,同时也避免了命名冲突等问题
    2013-11-11
  • 微信小程序picker多列选择器(mode = multiSelector)

    微信小程序picker多列选择器(mode = multiSelector)

    本文主要介绍了微信小程序picker多列选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 微信小程序自定义弹窗wcPop插件

    微信小程序自定义弹窗wcPop插件

    平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改。下面通过本文给大家带来了微信小程序自定义弹窗wcPop插件,感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • 根据地区不同显示时间的javascript代码

    根据地区不同显示时间的javascript代码

    根据地区不同显示时间的javascript代码...
    2007-08-08
  • js判断是否按下了Shift键的方法

    js判断是否按下了Shift键的方法

    这篇文章主要介绍了js判断是否按下了Shift键的方法,主要通过event.shiftKey方法来判断,需要的朋友可以参考下
    2015-01-01
  • js实现简易的单数字随机抽奖(0-9)

    js实现简易的单数字随机抽奖(0-9)

    这篇文章主要介绍了js实现简易的单数字0-9随机抽奖,可以控制抽取随机数开始与停止,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • js replace() 文本替换你所不知的

    js replace() 文本替换你所不知的

    今天看了一个函数,功能是把形如word-word的字符串转化为wordWord
    2010-03-03

最新评论