吸顶菜单

最新推荐文章于 2022-11-24 20:21:30 发布

lusizhifei

最新推荐文章于 2022-11-24 20:21:30 发布

阅读量783

点赞数 1

分类专栏： js 文章标签：吸顶菜单

本文链接：https://blog.csdn.net/lusizhifei/article/details/55261777

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0 auto;}
p{height:2000px;}
div{width:900px;height:500px;background:gold;}
#nav{overflow:hidden;background:#333;height:60px;margin:0 auto;width:900px;}
li{float:left;list-style:none;margin:24px;}
a{text-decoration: none;color:#fff;font-size:24px;}
</style>
<script type="text/javascript">
window.οnlοad=function(){

window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oNav=document.getElementById('nav');
//1.方法一思路:当滚动条到浏览器窗口的距离大于0的时候就让菜单固定在顶部
// if(scrollTop>0){
// oNav.style.position="fixed";
// oNav.style.top=0;
// oNav.style.left=140+'px';
// }else{
// oNav.style.position="static";
// }

//2.方法二思路:当滚动条到浏览器窗口的距离大于菜单到窗口顶部的距离（是个固定值，不变）
// if(scrollTop>oNav.offsetTop){
// oNav.style.position="fixed";
// oNav.style.top=0;
// oNav.style.left=140+'px';

// }else{
// oNav.style.position="static";
// }

}

}
</script>
</head>
<body>
<div></div>
<ul id="nav">
<li><a href="" herf="#">小电1</a></li>
<li><a href="" herf="#">小电2</a></li>
<li><a href="" herf="#">小电3</a></li>
<li><a href="" herf="#">小电4</a></li>
<li><a href="" herf="#">小电5</a></li>
<li><a href="" herf="#">小电6</a></li>
<li><a href="" herf="#">小电7</a></li>
<li><a href="" herf="#">小电8</a></li>
<li><a href="" herf="#">小电9</a></li>
<li><a href="" herf="#">小电10</a></li>
</ul>
<p></p>
</body>
</html>

lusizhifei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
吸顶菜单

Document*{margin:0 auto;}p{height:2000px;}div{width:900px;height:500px;background:gold;}#nav{overflow:hidden;background:#333;height:60px;margin:0 auto;width:900px;}li{float:left;list-style
复制链接

扫一扫