您正在使用 IPV4 [18.232.179.191] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS滚动到指定位置导航栏固定顶部
内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='UTF-8'titlejs滚动到指定位置导航栏固定顶部/titlestyletype='text/css'body{height:2500px;margin:0;padding:0;}.banner{height:250px;width:100%;background:#e5e5e5;}.bi......
<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>js滚动到指定位置导航栏固定顶部</title>

<styletype="text/css">

body{height:2500px;margin:0;padding:0;}

.banner{height:250px;width:100%;background:#e5e5e5;}

.bignav{width:100%;background:#000;}

.nav{background:#000;width:1200px;margin:0auto;height:45px;}

.nava{display:block;width:200px;float:left;color:#fff;text-decoration:none;text-align:center;line-height:45px;}

</style>

</head>

<body>

<divclass="banner">

</div>

<divclass="bignav"id="bignav">

<divclass="nav">

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页</a>

</div>

</div>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<p>其他内容</p>

<scripttype="text/javascript">

window.onscroll=function(){

vartopScroll=document.body.scrollTop;//滚动的距离,距离顶部的距离

varbignav=document.getElementById("bignav");//获取到导航栏id

if(topScroll>250){//当滚动距离大于250px时执行下面的东西

bignav.style.position='fixed';

bignav.style.top='0';

bignav.style.zIndex='9999';

}else{//当滚动距离小于250的时候执行下面的内容,也就是让导航栏恢复原状

bignav.style.position='static';

}

}

</script>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:分享网页检测摇一摇实例代码

 

下一篇:JavaScript制作的可折叠弹出式菜单示例

发布日期:2023/5/18
手机扫二维码直达本页
发布时间:12:19:32
点  击:9
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....