滑轮监听 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        *{
            margin: 0;
        }
        #menu{
            height: 48px;
            width: 100%;
            background-color: #3075dc;
            color: #565656;


        }
        #center{
            width: 700px;
            height: 47px;
            margin: 0 auto;
        }
        .title{
            height: 47px;
            text-align: center;
            line-height: 40px;
            float: left;
            width: 80px;
            cursor: pointer
        }
        #text-box{
            height: 5000px;
            width: 1100px;
            margin-left: 300px;
            border: 1px solid salmon;
            float: left;


        }
        #left-box{
            height: 80px;
            text-align: center;
            background-color: darkgray;
            float: left;
            border: black 1px dashed;
            width: 150px;
            position: absolute;

        }
        #left-box a {
            height: 30px;
            background-color: #7A77C8;
            display: inline-block;
            border: #48f444;
            color: #c0cddf;
            width: 150px;
            cursor: pointer

        }
        #right-box{
            width: 900px;
            margin-left: 150px;
            height: 1300px;
            text-align: center;
            color: #48f444;
            display: inline-block;
            position:relative;

        }
        #right-box div{
            border: #3075dc 1px solid;
            display: block;
            height: 700px;


        }
        .fafafa{
           position: fixed !important;
            top: 0;
        }

    </style>
</head>
<body>
    <div id="menu">
        <div id="center">
            <p class="title" onmouseover="func1(this)" onmouseout="func2(this)">首页</p>
            <p class="title" onmouseover="func1(this)" onmouseout="func2(this)">文章</p>
            <p class="title" onmouseover="func1(this)" onmouseout="func2(this)">图片</p>
            <p class="title" onmouseover="func1(this)" onmouseout="func2(this)">电影</p>
            <p class="title" onmouseover="func1(this)" onmouseout="func2(this)">论坛</p>

        </div>
        <div id="text-box">
            <div id="left-box" >
                <a num="1">第一章</a>
                <a num="2">第二章</a>
                <a num="3">第三章</a>
                <a num="4">第四章</a>
            </div>
            <div id="right-box">
                <div n="1" style="background-color: black">窗前明月光</div>
                <div n="2" style="background-color: #7A77C8">疑似地上霜</div>
                <div n="3" style="background-color: #2b99ff">举头望明月</div>
                <div n="4" style="background-color: #9b9b9b">低头思故乡</div>
                <div>hehe</div>
            </div>
        </div>
    </div>
    <div onclick="GoTop()" style="width: 45px;height: 45px;background-color:yellowgreen;color: black;position: fixed; right: 60px; bottom: 80px;text-align: center;cursor: pointer;">返回顶部</div>
<script>
    function func1(ev) {
        $(ev).css("color","red").siblings().css("color"," #565656");
    }

    function func2(ev) {
        $(ev).parent().children().css("color","#565656");
    }

    window.onscroll=function() {
        if ($(window).scrollTop() > 48) {
            $("#left-box").addClass("fafafa");

        }else {
            $("#left-box").removeClass("fafafa")
        }
    }
    function  GoTop() {
            $(window).scrollTop(0);
    }

 

posted @ 2017-12-16 00:01  归来仍是少年！  阅读(197)  评论(0)    收藏  举报