一个兼容所有浏览器的滑动固定导航--值得收藏

最新推荐文章于 2018-12-17 19:16:36 发布

邢管家

最新推荐文章于 2018-12-17 19:16:36 发布

阅读量483

点赞数

文章标签： html 邢思翔导航

本文链接：https://blog.youkuaiyun.com/xsxlff1314/article/details/78387795

版权

本文介绍了一个使用HTML和JavaScript实现的固定导航栏效果。当页面滚动到特定位置时，导航栏会固定在顶部。该效果利用了jQuery库来简化DOM操作，并通过监听窗口滚动事件来判断何时应用固定定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
<style>
*{margin: 0; padding: 0;}
body{ width: 100%; height: 3000px; background: salmon;}
#subNav .wrap{width: 100%;}
li{list-style: none;}
a{text-decoration: none;font-size: 14px;color: white;}
#subNav{width:100%;height:50px;background-color:#000;}
#subNav li{float:left;position:relative}
#subNav a{display:block;width:167px;height:50px;line-height: 50px; text-align:center; margin-left:12px;}
.fixedSubNav{position:fixed;top:0;left:0;z-index:1000}
</style>
</head>
<body>
<div class="pic"><img src="img/advantage2.jpg" width="100%"></div>

<div id="subNav">
<ul class="wrap">
<li><a href="#">京东商城2</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
<li><a href="#">京东商城</a></li>
</ul>
</div>
<script>
$(function(){
$(window).scroll(function(){
var targetTop = $(this).scrollTop();
if (targetTop >= 567){
$("#subNav").addClass("fixedSubNav");
}else{
$("#subNav").removeClass("fixedSubNav");
}
})
})
</script>
</body>

</html>