zoukankan      html  css  js  c++  java
  • Jquery滚动条事件的处理

    1。监听某个元素的滚动条事件

    $(selector).scroll(function(){.......});
     
    2.获取滚动条滚动的距离
    $(selector).scrollTop();
    $(selector).scrollLefft();
     
    3.滚动条事件和offset方法的应用
    实例1. 随浏览器滚动条而滚动的浮动div。例图:Jquery滚动条事件的处理 - 天马hygj - Nothing
    代码:
            #floatRight {
                position:relative; 
                float:right; 
                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 {
                600px; height:1000px; border:2px dotted red;
                overflow:scroll;
                margin:auto;
            }
            #contentFloat {
                float:right;position:relative;
                100px; height:100px; background-color:green;
                top:100px;
            }
     
                //滚动条滚动事件2
                var contentFloat = $("#contentFloat");
                var top = contentFloat.offset().top;
                $("#content").scroll(function () {
                    contentFloat.offset({top:top});
                });
     
     
     
     
     
  • 相关阅读:
    java几种字符串反转
    iOS安全攻防(三):使用Reveal分析他人app
    信息与计算科学
    搜索框中“请输入搜索keyword”
    上传图片图像进行压缩后上传
    ExtractFileDir 与 ExtractFilePath 的差别
    java中接口的定义与实现
    《IT运维之道》
    Linux查看硬件信息,主板型号及内存硬件,驱动设备,查看设备,查看CPU。
    CentOS6.5 x86_64 配置Broadcom 43XX系列 无线网卡驱动
  • 原文地址:https://www.cnblogs.com/haidao/p/3657525.html
Copyright © 2011-2022 走看看