JQuery 实现的页面滚动时浮动窗口控件
JQuery 实现的页面滚动时浮动窗口控件
1. Introduction:
这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置。同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了。
JQuery 实现的页面滚动时浮动窗口控件
有时候如果需要做个比较好用的导航条,使用这个控件挺不错的。
2. Code & Properties:
这个js文件是在jQuery和JQeury UI的核心上扩展的。所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js。
整个javascript如下:
复制代码 代码如下:
( 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 many times during a scroll.
            // We don't want multiple slides to queue up.
            box.queue( [ ] );

            // A bunch of values we need to determine where to animate to
            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 should 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 should 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( '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, { expires: 365, path: '/'} );

                            ani();
                        },
                        function ()
                        {
                            isActive = false;

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

                            box.animate(
                                {
                                    top: box.initialTop
                                }, options.speed, options.easing
                            );    

                            $.cookie( 'scrollFollowSetting' + 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( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
                        },
                        function ()
                        {
                            isActive = true;

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

                            $.cookie( 'scrollFollowSetting' + 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 );

这里面有几个参数可以设置效果:
JQuery 实现的页面滚动时浮动窗口控件
上面图示是用来设定这个DIV在滚动后的位置会在哪里。
而所有的动画效果参数设置如下:
JQuery 实现的页面滚动时浮动窗口控件
那么如何在HTML或者是其它的页面中使用呢?
复制代码 代码如下:
<script type="text/javascript"><!--
$( document ).ready( function ()
{
$( '#example' ).scrollFollow();
}
);
// --></script>
 
最后是设置ID为example这个DIV的Css样式,需要注意的是position必须设定为relative,如下例:
复制代码 代码如下:
#example {
position: relative;
width: 220px;
margin: 5px;
padding: 10px;
background: #DDDDDD;
border: 1px solid #42CBDC;
}
标签:
JQuery,页面滚动,浮动窗口

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JQuery 实现的页面滚动时浮动窗口控件”

暂无“JQuery 实现的页面滚动时浮动窗口控件”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。