ページがスクロールされたときのフローティング ウィンドウ コントロール_jQuery によって実装される

1. はじめに:
このコントロールが達成できる効果は、ページがスクロールするときに、特定の DIV が必要な場所に常に留まるということです。同時に、この DIV にコンテナを設定できます。スクロール バーがコンテナを超えると、DIV はスクロールしなくなります。

より便利なナビゲーション バーを作成する必要がある場合は、このコントロールを使用すると良い場合があります。
2. コードとプロパティ:
この js ファイルは、jQuery および JQeury UI のコアで拡張されています。したがって、使用する前に、JQuery 公式 Web サイトにアクセスして、2 つの js ファイル、jquery.js と ui.core.js をダウンロードする必要があります。
JavaScript 全体は次のとおりです:

コードをコピーします コードは次のとおりです:

( function( $ ) {

$.scrollFollow = function ( box, options )
{
// ボックスを jQuery オブジェクトに変換
box = $( box );

// 'box' はアニメーション化するオブジェクトです
varposition = box.css( 'position' );

function ani()

// スクリプトはスクロールごとに実行されます。つまり、スクロール中に何度も実行されます。
box.queue( [ ] ); 🎜> // アニメーション化する場所を決定する必要がある一連の値
var viewportHeight = parseInt( $( window ).height() );
var pageScroll = parseInt( $( document ).scrollTop() );
varparentTop = parseInt( box.cont.offset().top );
varparentHeight = parseInt( box.cont.attr( 'offsetHeight' ) ); var boxHeight = parseInt( box .attr( 'offsetHeight' ) ( parseInt( box.css( 'marginTop' ) ) || 0 ) ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
var aniTop;

// ユーザーがアニメーションの実行を希望していることを確認します
if ( isActive )
{
// ボックスがウィンドウの上部を基準にしてアニメーションするかどうか
場合 ( options.relativeTo == 'top' )
{
// ウィンドウの上部がボックスの上部に十分近づくまでアニメーションを行わない
if ( box.initialOffsetTop &g t;= ( pageScroll options.offset ) )
{
aniTop = box.initialTop;
else
{
aniTop = Math.min( .max( ( -parentTop ), ( pageScroll - box.initialOffsetTop box.initialTop ) ) options.offset ), (parentHeight - boxHeight - box.paddingAdjustment ) );
}
}
// ウィンドウの下部を基準にしてボックスをアニメーション化するかどうか
else if ( options.relativeTo == 'bottom' )

{ // 一番下までアニメーション化しないでください。ウィンドウがボックスの下部に十分近い
if ( ( box.initialOffsetTop boxHeight ) >= ( pageScroll options.offset viewportHeight ) )
{ aniTop = box.initialTop;
else
{
aniTop = Math.min( ( pageSc roll viewportHeight - boxHeight - options.offset ), (parentHeight - boxHeight ) );
}


// 関連するスクロールが最後のスクロールかどうかを確認します
// 「-20」はタイムアウトの不正確性を考慮してください
if ( ( new Date().getTime() - box.lastScroll ) >= ( options.lay - 20 ) )
{
box.animate(
{
トップ: aniTop
}, options.speed、options.easing
);
}
}
};

// ユーザーによるスライドの停止の場合
var isActive = true;

if ( $.cookie != unknown )
{
if( $.cookie( 'scrollFollowSetting' box.attr( 'id' ) ) == 'false' )
{
var isActive = false;

$( '#' options.killSwitch ).text( options.offText )
.toggle(
function () {
isActive = true; > $( this ).text( options.onText );

$.cookie( 'scrollFollowSetting' box.attr( 'id' ), true, { 有効期限: 365, パス: '/'} );

ani();
関数 ()
{
isActive = false;

$( this ).text( options.offText );

box.animate(
{
トップ: box.initialTop
options.speed、options.easing


$.cookie( ' scrollFollowSetting' box.attr( 'id' ), false, { 有効期限: 365, パス: '/'} );
}
);
}
else
{
$( '#' options.killSwitch ).text( options.onText )
.toggle(
function ()
{
isActive = false;

$( this ).text( options.offText );

box.animate(
{
top: box.initialTop
}, 0
) ;

$.cookie( 'scrollFollowSetting' box.attr( 'id' ), false, { 期限: 365, パス: '/'} ); },
関数 ()
{
isActive = true;

$( this ).text( options.onText );

$.cookie( 'scrollFollowSetting' box.attr( 'id' ), true、{ 有効期限: 365、パス: '/'} );

ani();
}
);
}
}

// 親 ID が指定されておらず、直接の親に ID がない場合
// options.container は未​​定義になります。したがって、親要素を理解する必要があります。
if ( options.container == '')
{
box.cont = box.parent();
}
else
{
box.cont = $( '#' options.container );
}

// ボックスのデフォルトの位置を検索します。
box.initialOffsetTop = parseInt( box.offset().top );
box.initialTop = parseInt( box.css( 'top' ) ) || 0;

// 「絶対」と「相対」で配置されたボックスの異なる処理を修正するハック
if ( box.css( 'position' ) == 'relative' )
{
box .paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) parseInt( box.cont.css( 'paddingBottom' ) );
}
else
{
box.paddingAdjustment = 0;
}

// ページのスクロール時にボックスをアニメーション化する
$( window ).scroll( function ()
{
// の遅延を設定しますアニメーション
$.fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

// アニメーションを設定する直前にチェックする
box.lastScroll = new Date().getTime();
}
);

// ページのサイズ変更時にボックスをアニメーション化する
$( window ).resize( function ()
{
// アニメーションの遅延を設定します
$。 fn.scrollFollow.interval = setTimeout( function(){ ani();} , options.delay );

// アニメーションを設定する直前にチェックする
box.lastScroll = new Date() .getTime();
}
);
// ページの読み込み時に初期アニメーションを実行します
box.lastScroll = 0;

ani();
};

$.fn.scrollFollow = function ( options )
{
options = オプション || {};
        options.relativeTo = options.relativeTo || 'top';
        options.speed = options.speed || 1;
        options.offset = options.offset || 0;
        options.easing = options.easing || 'swing';
        options.container = options.container || this.parent().attr( 'id' );
        options.killSwitch = options.killSwitch || 'killSwitch';
        options.onText = options.onText || 'Turn Slide Off';
        options.offText = options.offText || 'Turn Slide On';
        options.delay = options.delay || 0;

        this.each( function()
            {
                new $.scrollFollow( this, options );
            }
        );

        return this;
    };
})( jQuery );

这里面有几个参数可以设置效果:

上面图示是用来设定这个DIV在滚动后的位置会在哪里。
而所有的动画效果参数设置如下:

那么如何在HTML或者是其它的页面中使用呢?

复制代码 代码如下:

 
最后是设置ID为example这个DIV的Css样式,需要注意的是position必须设定为relative,如下例:

复制代码 代码如下:

#example {
position: relative;
width: 220px;
margin: 5px;
padding: 10px;
background: #DDDDDD;
border: 1px solid #42CBDC;
}