前端入门之——后台管理页面布局 学习 day10

1、滚动滑轮事件监听

2、内容到窗口的距离

3、position:absolute

　　定位置：右下角

　　滚动：不固定

===========================后天管理页面的布局======================================

利用：  absolute+overflow:auto

===========================监听滚动菜单的功能======================================

1、监听滑轮滚动事件

2、如何获取当前滚轮滑动的高度

在jQuery中 $("body").scrollTop()来获取滑轮滚动的高度     scrollLeft()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单演示</title>
    <style>
        .menu{
            position: absolute;left: 200px;220px;top: 48px;bottom: 0px;border: 1px solid red
        }
        .fafafa{
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body style="margin: 0px" onscroll="Gun();">
    <div style="height: 48px;background-color: #303a40"></div>
    <div id="menu" class="menu"></div>
    <div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>
        <p>sss</p>

    </div>
    <script src="jquery-3.3.1.js"></script>
<script>
    function Gun() {
        var scrollTop=$('body').scrollTop();
        if(scrollTop>48){
        $("#menu").addClass("fafafa")
    }
    else{
        $("#menu").removeClass("fafafa")
    }
    //     console.log(scrollTop);
    }

</script>
</body>
</html>
View Code

 3、如何获取某个标签距离顶部高度

　　$(..).offset()   获取当前标签距离文档顶部的高度

　　$(..).height()   获取当前标签自己的高度  取得匹配元素当前计算的高度值（px）

　　$(..).innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

　　$(..).outerHeight([options]) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。设置为 true 时，计算边距在内。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单演示</title>
    <style>
        .menu{
            position: absolute;left: 200px;220px;top: 48px;bottom: 0px;border: 1px solid red
        }
        .menu a{
            display: block;
        }
        .active{
            background-color: #3c3c3c;
            color:white;
        }
        .fafafa{
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body style="margin: 0px" onscroll="Gun();">
    <div style="height: 48px;background-color: #303a40"></div>
    <div id="menu" class="menu">
        <a b="1">菜单一</a>
        <a b="2">菜单二</a>
        <a b="3">菜单三</a>
        <a b="4">菜单四</a>
    </div>
    <div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
       <div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">

       </div>
       <div a="2" style="height: 800px;background-color:gold"></div>
        <div a="3" style="height: 1000px;background-color:blue"></div>
        <div a="4" style="height:1000px;background-color:#d6e9c6"></div>

    </div>
    <script src="jquery-3.3.1.js"></script>
<script>
    function Gun() {
        var scrollTop=$('body').scrollTop();
        if(scrollTop>48){
            $("#menu").addClass("fafafa")
        }
        else{
            $("#menu").removeClass("fafafa");
            $('#menu a').removeClass('active')
        }
    //     console.log(scrollTop);
    //     var title=49;
    //     // $("#ii1").offset().top;
    //     var top=title-scrollTop;
    //     // console.log(top)
    //     if(top<0){
    //
    //     }
        $("#conent").children().each(function () {
            var eleTop=$(this).offset().top;
            var winTop=eleTop-scrollTop;
            // console.log(winTop)
            var winBottomTop=eleTop+$(this).height()-scrollTop;
            if(winTop<=0 && winBottomTop>0){
                var a=$(this).attr("a");
                console.log(a);
                $("#menu a[b='"+a+"']").addClass('active').siblings().removeClass('active')
                return;//结束循环
            }
        })
    }

</script>
</body>
</html>
View Code

$(window).height() 整个窗口的高度

$(document).height() 约等于整个文档的高度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单演示</title>
    <style>
        .menu{
            position: absolute;left: 200px;220px;top: 48px;bottom: 0px;border: 1px solid red
        }
        .menu a{
            display: block;
        }
        .active{
            background-color: #3c3c3c;
            color:white;
        }
        .fafafa{
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body style="margin: 0px" onscroll="Gun();">
    <div style="height: 48px;background-color: #303a40"></div>
    <div id="menu" class="menu">
        <a b="1">菜单一</a>
        <a b="2">菜单二</a>
        <a b="3">菜单三</a>
        <a b="4">菜单四</a>
    </div>
    <div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
       <div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">

       </div>
       <div a="2" style="height: 800px;background-color:gold"></div>
        <div a="3" style="height: 1000px;background-color:blue"></div>
        <div a="4" style="height:50px;background-color:#d6e9c6"></div>

    </div>
    <script src="jquery-3.3.1.js"></script>
<script>
    function Gun() {
        var scrollTop=$('body').scrollTop();
        if(scrollTop>48){
            $("#menu").addClass("fafafa")
        }
        else{
            $("#menu").removeClass("fafafa");
            $('#menu a').removeClass('active')
        }
    //     console.log(scrollTop);
    //     var title=49;
    //     // $("#ii1").offset().top;
    //     var top=title-scrollTop;
    //     // console.log(top)
    //     if(top<0){
    //
    //     }
        $("#conent").children().each(function () {
            var eleTop=$(this).offset().top;
            var winTop=eleTop-scrollTop;
            // console.log(winTop)
            var winBottomTop=eleTop+$(this).height()-scrollTop;
            var docHeight=$(document).height();
            var winHeight=$(window).height();
            console.log(docHeight-winHeight)
            console.log(scrollTop)
            //由于浏览器兼容问题，可能会导致 docHeight-winHeight==scrollTop 不成立，可以改成<=
            if(docHeight-winHeight<=scrollTop){
                $("#menu a:last").addClass('active').siblings().removeClass('active')
            }else {
                if (winTop <= 0 && winBottomTop > 0) {
                    var a = $(this).attr("a");
                    // console.log(a);
                    $("#menu a[b='" + a + "']").addClass('active').siblings().removeClass('active')
                    return;//结束循环
                }
            }
        })
    }

</script>
</body>
</html>
View Code

 添加一个返回顶部功能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单演示</title>
    <style>
        .menu{
            position: absolute;left: 200px;220px;top: 48px;bottom: 0px;border: 1px solid red
        }
        .menu a{
            display: block;
        }
        .active{
            background-color: #3c3c3c;
            color:white;
        }
        .fafafa{
            position: fixed;
            top: 0px;
        }
    </style>
</head>
<body style="margin: 0px" >
    <div style="height: 48px;background-color: #303a40"></div>
    <div id="menu" class="menu">
        <a b="1">菜单一</a>
        <a b="2">菜单二</a>
        <a b="3">菜单三</a>
        <a b="4">菜单四</a>
    </div>
    <div id="conent" style="position: absolute;left: 420px;top: 48px;bottom: 0px;right:200px;border: 1px solid green;">
       <div id="ii1" a="1" style="height: 500px;background-color: #5cb85c;">

       </div>
       <div a="2" style="height: 800px;background-color:gold"></div>
        <div a="3" style="height: 1000px;background-color:blue"></div>
        <div a="4" style="height:50px;background-color:#d6e9c6"></div>

    </div>
    <div style="cursor: pointer; position: fixed;right: 0;bottom: 0; 50px;height: 50px;background-color: #1b6d85" onclick="f1();">返回顶部</div>
    <script src="jquery-3.3.1.js"></script>
<script>
    function f1() {
        $(window).scrollTop(0);
    }
    window.onscroll=function () {
        var scrollTop=$('body').scrollTop();
        if(scrollTop>48){
            $("#menu").addClass("fafafa")
        }
        else{
            $("#menu").removeClass("fafafa");
            $('#menu a').removeClass('active')
        }
    //     console.log(scrollTop);
    //     var title=49;
    //     // $("#ii1").offset().top;
    //     var top=title-scrollTop;
    //     // console.log(top)
    //     if(top<0){
    //
    //     }
        $("#conent").children().each(function () {
            var eleTop=$(this).offset().top;
            var winTop=eleTop-scrollTop;
            // console.log(winTop)
            var winBottomTop=eleTop+$(this).height()-scrollTop;
            var docHeight=$(document).height();
            var winHeight=$(window).height();
            console.log(docHeight-winHeight)
            console.log(scrollTop)
            //由于浏览器兼容问题，可能会导致 docHeight-winHeight==scrollTop 不成立，可以改成<=
            if(docHeight-winHeight-1<=scrollTop){
                $("#menu a:last").addClass('active').siblings().removeClass('active')
            }else {
                if (winTop <= 0 && winBottomTop > 0) {
                    var a = $(this).attr("a");
                    // console.log(a);
                    $("#menu a[b='" + a + "']").addClass('active').siblings().removeClass('active')
                    return;//结束循环
                }
            }
        })
    }

</script>
</body>
</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Mengchangxin/p/9668307.html