导航吸顶效果

最新推荐文章于 2024-04-14 20:34:11 发布

诸葛苍穹

最新推荐文章于 2024-04-14 20:34:11 发布

阅读量2.7k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/u012260672/article/details/52562733

版权

javaScript 专栏收录该内容

131 篇文章 0 订阅

订阅专栏

<html>

<head>
<title>我的第一个 HTML 页面</title>
<style>
h1{height:100px;}
#nav{background:red;height:40px;line-height:40px;}
.fixed{position:fixed;width:100%;top:20px;}

</style>
<script>
window.onload = function(){
var nav = document.getElementById("nav");

document.onscroll = function(){

var t = document.body.scrollTop || document.documentElement.scrollTop;
if(t >= nav.offsetTop){

nav.className = "fixed";
}else{

nav.className = " ";
}

}


}
</script>

</head>

<body>
<h1>logo</h1>
<div id="nav">导航吸顶</div>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

诸葛苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航吸顶效果

<html><head><title>我的第一个 HTML 页面</title><style>h1{height:100px;}#nav{background:red;height:40px;line-height:40px;}.fixed{position:fixed;width:100%;top:20px;}</style><script>window.onload = funct
复制链接

扫一扫