Jquery滚动条事件的处理

来源:互联网 发布:斐讯k2连接端口失败 编辑:程序博客网 时间:2024/04/29 20:16
1。监听某个元素的滚动条事件
$(selector).scroll(function(){.......});

2.获取滚动条滚动的距离
$(selector).scrollTop();
$(selector).scrollLefft();

3.滚动条事件和offset方法的应用
实例1. 随浏览器滚动条而滚动的浮动div。例图:Jquery滚动条事件的处理 - 天马hygj - Nothing
代码:
        #floatRight {
            position:relative; 
            float:right; 
            width:200px; height:200px; background-color:green;
            top:100px;
            z-index:1000;
        }
            //滚动条滚动事件1
            var oldSite=new Object();
            oldSite.left=$("#floatRight").offset().left;
            oldSite.top=$("#floatRight").offset().top;
            $(window.document).scroll(function () {
                var scrolltop = $(document).scrollTop();
                var top=oldSite.top+scrolltop;
                $("#floatRight").offset({ top: top });
            });
实例2.虽dom元素内滚动条滚动而滚动的浮动div
实例图
Jquery滚动条事件的处理 - 天马hygj - Nothing

         #content {
            width:600px; height:1000px; border:2px dotted red;
            overflow:scroll;
            margin:auto;
        }
        #contentFloat {
            float:right;position:relative;
            width:100px; height:100px; background-color:green;
            top:100px;
        }

            //滚动条滚动事件2
            var contentFloat = $("#contentFloat");
            var top = contentFloat.offset().top;
            $("#content").scroll(function () {
                contentFloat.offset({top:top});
            });
0 0
原创粉丝点击