<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="v.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" >首页</a></li>
<li><a href="#" >首页</a></li>
<li><a href="#" >首页</a></li>
<li><a href="#" >首页</a></li>
<li><a href="#" >首页</a></li>
</ul>
</nav>
</header>
<main>
<div class="con">
<ul>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
</ul>
</div>
<aside>
<ul class="aside1" >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul id="aside2">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</aside>
</main>
<footer>
</footer>
<script src="v.js"></script>
</body>
</html>
* {
margin : 0;
padding : 0;
box-sizing: content-box;
}
.fix {
position: fixed;
}
@nh: 7vh;
@nw: 50vw;
@ah: 30vh;
@aw: 20vh;
body {
header {
width : 100vw;
height : @nh;
background-color: rgb(140, 140, 180);
position : fixed;
nav {
width : @nw;
height: @nh;
ul {
width : @nw;
height: @nh;
li {
display : block;
list-style : none;
width : (@nw/5); //除法加上括号才能实现；
height : @nh;
line-height: @nh;
float : left;
a {
display : block;
text-decoration: none;
text-align : center;
}
}
}
}
}
main {
position: relative;
top : @nh;
width : 50vw;
margin : 0 auto;
.con {
width: 30vw;
float: left;
ul {
li {
font-size : 6vh;
list-style: none;
}
}
}
aside {
width : @aw;
float : left;
display: inline;
.aside1 {
height: @ah;
width : @aw;
li {
font-size : 6vh;
list-style: none;
}
}
#aside2 {
width : @aw;
height: @ah;
position: static;
li {
font-size : 6vh;
list-style: none;
}
}
}
}
footer {}
}
```javascript
window.onload = function () {
var navh = 0.07;//7/100
var hei = document.documentElement.clientHeight;//屏幕高度
var topScroll = document.body.scrollTop || document.documentElement.scrollTop;
var scope = topScroll/hei;//滚动的高度/屏幕高度
var aside = document.getElementById("aside2");
console.log(topScroll)//打印不出来值？？？？？？？？？？？
if (scope > navh) {
aside.style.position = "fixed";
} else {
aside.style.position = "static";
}
};
```javascript