吸顶菜单,现在的pc端网页也是很常用的一个功能,干货来了,直接上源码,可以做得更完美的,原本一套样式,吸顶时,再给一套样式,可自由发挥。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
background: #ccc;
}
#head {
width: 100%;
height: 200px;
background: lightblue;
}
#menu {
width: 100%;
height: 100px;
background: lightcoral;
}
#menu1 {
width: 100%;
height: 100px;
}
#main1 {
height: 200px;
background: orange;
}
#main2 {
height: 200px;
background: #58bc58;
}
.fix {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="head"></div>
<!-- fix定位会脱离文档流,需要用个盒子装着,始终都有处于文档流中,
不然固定的一瞬间会出现bug -->
<div id="menu1">
<div id="menu"></div>
</div>
<div id="main1">
<h2>main1</h2>
</div>
<div id="main2">
<h2>main2</h2>
</div>
</body>
<script>
(function () {
var menu = document.getElementById('menu');
var main1 = document.getElementById('main1');
var iTop = menu.offsetTop;
/*
需求:吸顶菜单
* 滚动滑轮,获取滚动距离
* 如果超过了临界值,就给菜单添加fixed,吸在顶部
*/
window.onscroll = function () {
var scrollTop = window.scrollY;
if (scrollTop >= iTop) {
// console.log('到达临界点了');
menu.className = 'fix';
} else {
menu.className = '';
}
}
})();
</script>
</html>