<!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=" 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); }