实战--滚动菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>滚动菜单</title>
    <meta charset="UTF-8">
    <script src="jquery-3.4.1.js"></script>
    <style>
        .menu{
            position: absolute;
            width: 220px;
            left: 200px;top:48px;
            bottom: 0;
            border:1px solid red
        }
        #content{
            position: absolute;
            left: 420px;
            top:48px;
            bottom: 0;
            right:200px;
            border:1px solid greenyellow;
            /*overflow: auto;*/
        }
        .left{
            position: fixed;
            top:0;/*使小菜单距离上部0*/
        }
        .active{
            background-color: #0080ff;
        }
        a{
            display: block;

        }
        .re{
            position: fixed;
            background-color: #fff0e8;
            width: 60px;
            height:50px;
            bottom: 0;right:0;
            border:1px solid red;
            cursor:pointer;
        }
    </style>
</head>
<body style="margin:0">
<!--1.监听滑轮的滚动事件
    2.如何获取当前滚轮滑动的高度------$('body').scrollTop()
    如果要上面菜单，而不要左边菜单，在中间内容加上overflow:auto(如后台管理页面的布局);
    3.onscroll事件
    4.scrollTop()获取滑轮滑动的高度（距离上边的高度）
    scrollLeft()获取距离左边的高度
    5.如何获取标签距离顶部的高度
    （1）获取某个标签距离文档顶部高度：$('..').offset().top
    （1.1）获取当前标签自己的高度：$('..').height()----（永远获取自己高度）
    （1.2）$('..').innerHeight()：（永远获取自己高度+padding）获取第一个匹配元素内部区域高度（包括补白，不包括边框）
    （1.3）$('..').outerHeight()：
参数一：<false>（永远获取自己高度+padding+border）获取第一个匹配元素外部区域高度（默认包括补白和边框）
参数二：<true>（永远获取自己高度+padding+border+margin），设置为true时，计算边框在内-->
<div style="height: 48px;background-color: black"></div>
<div id='menu' class="menu left">
    <a b="1">菜单一</a>
    <a b="2">菜单二</a>
    <a b="3">菜单三</a>
    <a b="4">菜单四</a>
</div>
<div id="content">
    <div id="id1" a="1" class="section" onclick="function1()" style="height:800px;background-color: #ee5555">-</div>
    <div id="id2" a="2" class="section" onclick="function2()" style="height:900px;background-color: black">-</div>
    <div id="id3" a="3" class="section" onclick="function3()" style="height:1000px;background-color: yellow">-</div>
    <div id="id4" a='4' class="section" onclick="function4()" style="height:1200px;background-color: blueviolet">-</div>
</div>
<div class="re" onclick="back()">返回</div>
<script src="jquery-3.4.1.js">
    function back() {//返回顶部
        $(window).scrollTop=0;
    

    }
    window.onscroll=function(){//给window绑定滚动事件
        var scroll_top=$('body').scrollTop;
        if(scroll_top>48){
            $('#menu').addClass('left');
        }else{
            $('#menu').removeClass('left');
            //$('#menu a').removeClass('active');
        }
//        var title=49;//$('#id1').offset().top----得到距离顶部高度49
//        var top_dis=title-scroll_top;
//        if(top_dis<0){
//            //给左边的菜单一加上active
//        }
        $('#content').children().each(function () {
            var ele_top_dis=$(this).offset().top;//this指当前文档
            var up_top_dis=ele_top_dis-scroll_top;//文档上边距离顶部的高度
            var bottom_top_dis=ele_top_dis+$(this).height-scroll_top;//文档下边距离顶部的高度

            //窗口的高度：$(window).height()
            //获取整个文档的高度：$(document).height()
            var doc_height=$(document).height();
            var win_height=$(window).height();

            if(doc_height-win_height==scroll_top){//到达最底部，给最后一个菜单加上active
                $('#menu a:last').addClass('active').siblings().removeClass('active');

            }else{
                if(up_top_dis<=0 && bottom_top_dis>0){
                //当前内容对应的菜单应该被选中
                //给当前内容对应的菜单加上active,给他的兄弟去掉active
                var a=$(this).attr('a');
                $('#menu a[b="'+a+'"]').addClass('active').siblings().removeClass('active');
                //此处b属性=a的值
                return;//return 作用：终止循环，each不再检查其他的内容了

            }

            }


        })


    }
</script>

</body>
</html>
猜你喜欢
