Floating window control for Page scrolling implemented by JQuery _ jquery

The floating window control implementation code for Page scrolling implemented by JQuery can be referred to below.

1. Introduction:
The result of this control is that when your page is scrolling, a DIV stays where you need it forever. At the same time, you can set a container for this DIV. When the scroll bar has exceeded this container, the DIV will no longer scroll.

Sometimes it is nice to use this control if you need to make a good navigation bar.
2. Code & Properties:
This js file is extended at the core of jQuery and JQeury UI. Before using it, you must download the two js files, JQuery. js and ui. core. js, on the official jquery website.
The entire javascript code is as follows:

The Code is as follows:

(Function ($ ){

$. ScrollFollow = function (box, options)
{
// Convert box into a jQuery object
Box = $ (box );

// 'Box' is the object to be animated
Var position = box.css ('position ');

Function ani ()
{
// The script runs on every scroll which really means during times a scroll.
// We don't want multiple slides to queue up.
Box. queue ([]);

// A bunch of values we need to determine where to animate
Var viewportHeight = parseInt ($ (window). height ());
Var pageScroll = parseInt ($ (document). scrollTop ());
Var parentTop = parseInt (box. cont. offset (). top );
Var parentHeight = parseInt (box. cont. attr ('offsetheight '));
Var boxHeight = parseInt (box. attr ('offsetheight') + (parseInt (box.css ('margintop ') | 0) + (parseInt (box.css ('marginbottom') | 0 ));
Var aniTop;

// Make sure the user wants the animation to happen
If (isActive)
{
// If the box shocould animate relative to the top of the window
If (options. relativeTo = 'top ')
{
// Don't animate until the top of the window is close enough to the top of the box
If (box. initialOffsetTop> = (pageScroll + options. offset ))
{
AniTop = box. initialTop;
}
Else
{
AniTop = Math. min (Math. max (-parentTop), (pageScroll-box. initialOffsetTop + box. initialTop) + options. offset), (parentHeight-boxHeight-box. paddingAdjustment ));
}
}
// If the box shoshould animate relative to the bottom of the window
Else if (options. relativeTo = 'bottom ')
{
// Don't animate until the bottom of the window is close enough to the bottom of the box
If (box. initialOffsetTop + boxHeight)> = (pageScroll + options. offset + viewportHeight ))
{
AniTop = box. initialTop;
}
Else
{
AniTop = Math. min (pageScroll + viewportHeight-boxHeight-options. offset), (parentHeight-boxHeight ));
}
}

// Checks to see if the relevant scroll was the last one
// "-20" is to account for inaccuracy in the timeout
If (new Date (). getTime ()-box. lastScroll) >=( options. delay-20 ))
{
Box. animate (
{
Top: aniTop
}, Options. speed, options. easing
);
}
}
};

// For user-initiated stopping of the slide
Var isActive = true;

If ($. cookie! = Undefined)
{
If ($. cookie ('rollfollowsetting' + box. attr ('id') = 'false ')
{
Var isActive = false;

$ ('#' + Options. killSwitch). text (options. offText)
. Toggle (
Function ()
{
IsActive = true;

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

$. Cookie ('rollfollowsetting' + box. attr ('id'), true, {expires: 365, path :'/'});

Ani ();
},
Function ()
{
IsActive = false;

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

Box. animate (
{
Top: box. initialTop
}, Options. speed, options. easing
);

$. Cookie ('rollfollowsetting' + box. attr ('id'), false, {expires: 365, path :'/'});
}
);
}
Else
{
$ ('#' + Options. killSwitch). text (options. onText)
. Toggle (
Function ()
{
IsActive = false;

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

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

$. Cookie ('rollfollowsetting' + box. attr ('id'), false, {expires: 365, path :'/'});
},
Function ()
{
IsActive = true;

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

$. Cookie ('rollfollowsetting' + box. attr ('id'), true, {expires: 365, path :'/'});

Ani ();
}
);
}
}

// If no parent ID was specified, and the immediate parent does not have an ID
// Options. container will be undefined. So we need to figure out the parent element.
If (options. container = '')
{
Box. cont = box. parent ();
}
Else
{
Box. cont = $ ('#' + options. container );
}

// Finds the default positioning of the box.
Box. initialOffsetTop = parseInt (box. offset (). top );
Box. initialTop = parseInt (box.css ('top') | 0;

// Hack to fix different treatment of boxes positioned 'absolute 'and 'relative'
If (box.css ('position') = 'relative ')
{
Box. paddingAdjustment = parseInt (box.cont.css ('paddingtop ') + parseInt (box.cont.css ('paddingbottom '));
}
Else
{
Box. paddingAdjustment = 0;
}

// Animate the box when the page is scrolled
$ (Window). scroll (function ()
{
// Sets up the delay of the animation
$. Fn. scrollFollow. interval = setTimeout (function () {ani () ;}, options. delay );

// To check against right before setting the animation
Box. lastScroll = new Date (). getTime ();
}
);

// Animate the box when the page is resized
$ (Window). resize (function ()
{
// Sets up the delay of the animation
$. Fn. scrollFollow. interval = setTimeout (function () {ani () ;}, options. delay );

// To check against right before setting the animation
Box. lastScroll = new Date (). getTime ();
}
);
// Run an initial animation on page load
Box. lastScroll = 0;

Ani ();
};

$. Fn. scrollFollow = function (options)
{
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 );

There are several parameters to set the effect:

The figure above is used to set the position of the DIV after scrolling.
All animation effect parameters are set as follows:

So how to use it in HTML or other pages?

The Code is as follows: