Home > Web Front-end > JS Tutorial > Small plug-in sticky source code that slides with the form_javascript skills

Small plug-in sticky source code that slides with the form_javascript skills

WBOY
Release: 2016-05-16 17:31:49
Original
968 people have browsed it

复制代码 代码如下:

     $.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 });

The following duration parameter represents the sliding speed , the bigger it is, the slower it is.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template