ホームページ > ウェブフロントエンド > jsチュートリアル > form_javascript スキルを使用してスライドする小さなプラグインのスティッキー ソース コード

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

WBOY
リリース: 2016-05-16 17:31:49
オリジナル
969 人が閲覧しました

复制代代码如下:

$.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パラメータはスライド速度を表します、大きいほど遅くなります。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート