form_javascript スキルを使用してスライドする小さなプラグインのスティッキー ソース コード

复制代代码如下:

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

$obj.cs s({ 位置: '絶対' });

if(opts.lockBottom){
varbottomPos = $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 >開始オフセット;  
var objBiggerThanWindow = $obj.outerHeight() < $(ウィンドウ).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({ トップ: newpos }, opts.duration );
}
});
};

使用方法很简单：只要页面中该插件，その後、選択择器调用：

复制代码代码如下:

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

次のdurationパラメータはスライド速度を表します、大きいほど遅くなります。