zoukankan      html  css  js  c++  java
  • 关于滚动条

    //判断页面滚动条到达底部或者顶部
    $(window).scroll(function() {
    //$(document).scrollTop() 获取垂直滚动的距离
    //$(document).scrollLeft() 这是获取水平滚动条的距离
    if ($(document).scrollTop() <= 0) {
    alert("滚动条已经到达顶部为0");
    }

    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
    alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
    });

    //判断滚动方向
    var initTop = 0;
    $(window).scroll(function(){
    var scrollTop = $(document).scrollTop();
    if(scrollTop > initTop){
    alert("下");
    } else {
    alert("上");
    }
    initTop = scrollTop;
    });

    //滚动监听导航
    $(function(){  
        //获取导航距离页面顶部的距离  
        var toTopHeight = $("#nav").offset().top;  
          
        //监听页面滚动  
        $(window).scroll(function() {  
            //判断页面滚动超过导航时执行的代码  
            if( $(document).scrollTop() > toTopHeight ){  
                //检测是否为IE6。jQuery1.9中去掉了msie的方法,所以只好这样写  
                if ('undefined' == typeof(document.body.style.maxHeight)) {  
                    //页面滚动的距离  
                    var scrollTop = $(document).scrollTop();  
                    //IE6下,用absolute定位,并设置Top值为距离页面顶部的距离  
                    $("#nav").css({'position':'absolute','top':scrollTop+'px'});  
                }else{  
                    //IE6以上浏览器采用fixed定位  
                    $("#nav").addClass("nav_fixed");  
                }  
            }else{//判断页面滚动没有超过导航时执行的代码  
                if ('undefined' == typeof(document.body.style.maxHeight)) {  
                    //设置Top值为导航距页面顶部的初始值。(IE6为了防止浏览器一下滚动过多,所以不能采用直接去掉定位的方法)  
                    $("#nav").css({'position':'absolute','top':toTopHeight+'px'});  
                }else{  
                    //IE6以上浏览器移除fixed定位,采用默认流布局  
                    $("#nav").removeClass("nav_fixed");  
                }  
            }  
        }); 
    });  
     
  • 相关阅读:
    jenkins 安装插件失败
    win10 右键新建卡顿
    Linux发布java jar包
    Linux搭建java环境
    java代码检出打包
    虚拟机Vmware使用记录
    地图坐标
    vs2019 扩展工具
    服务器内网穿透
    intelliJ 软件项目打开运行
  • 原文地址:https://www.cnblogs.com/luccy/p/5279915.html
Copyright © 2011-2022 走看看