js设置导航栏顶部固定

2025-09-28 10:21:55

1、第一步，打开html编辑器sublimeText，如下图

js设置导航栏顶部固定

2、第二步，编写一个静态的HTML导航栏，详细代码如下图

js设置导航栏顶部固定

3、第三步，详细的效果，如下图

js设置导航栏顶部固定

4、第四步，js代码控制css实现导航栏置顶，详细代码如下图

js设置导航栏顶部固定

5、第五步，最终js设置导航栏一直置顶，如下图

js设置导航栏顶部固定

6、详细代码如下，如下图

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

*{margin:0;padding: 0; }

ul,li{list-style: none;}

.wrap{height: 1680px;}

.nav{overflow: hidden;width: 100%;}

.nav li{width: 20%; height: 50px; line-height: 50px;

text-align: center; background: #31B8DF; color: #fff;

float: left;}

</style>

</head>

<body>

</ul>

</div>

var nav = document.getElementById('nav');

nav.style.position="fixed";

nav.style.top="0px";

nav.style.left="0px";

</script>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。