JQuery 实现的页面滚动时浮动窗口控件


Posted in Javascript onJuly 10, 2009

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; 
}
Javascript 相关文章推荐
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
koa+jwt实现token验证与刷新功能
May 30 Javascript
微信小程序实现录音功能
Nov 22 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
javascript 读取xml,写入xml 实现代码
Jul 10 #Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 #Javascript
jquery Firefox3.5中操作select的问题
Jul 10 #Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 #Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 #Javascript
最简单的jQuery程序 入门者学习
Jul 09 #Javascript
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python数据结构之Array用法实例
2014/10/09 Python
Python中用Spark模块的使用教程
2015/04/13 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
详解python中递归函数
2019/04/16 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
4s店销售经理岗位职责
2014/07/19 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android