jquery 滚动条 触发事件

jquery 滚动条 触发事件1。监听某个元素的滚动条事件$(selector).scroll(function(){…….});2.获取滚动条滚动的距离$(selector).scrollTop();$(selector).scrollLefft();3.滚动条事件和offset方法的应用实例1.随浏览器滚动条而滚动的浮动div。例图:代码:    #

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});
            });

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/39077.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注