jQuery实现网站导航栏吸顶功能（固定顶部栏）的方法

徐行致远

于 2024-12-07 09:40:22 发布

阅读量347

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/linyiphp/article/details/144305215

当我们浏览网站时，我们一滚动网站主体，网站顶部导航栏就会因滚动而无法再看到，更不能点击，如果想点击使用，还得重新用鼠标重新滚回网站顶部进行操作，这样的对用户体验不友好，今天分享的一个方法，就是不管网站怎么滚动，网站导航栏一直在顶部固定，类似网站导航栏吸顶功能效果。代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现网站导航栏吸顶功能（固定顶部栏）的方法</title>
<style>
.navwrap{ height: 30px;}
.nav{ width: 1000px; margin: 0 auto;}
.nav ul {margin: 0; padding: 0; list-style-type: none;}
.nav ul li{ float: left; background: #ddd; width: 200px; height: 30px; line-height: 30px; text-align: center; margin: 0; padding: 0;}
    
.sticky {
    position: fixed !important;
    left: 0;
    top: 0;
    margin: auto;
    width: 100%;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    z-index: 9999;
    -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
    box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
    background: rgba(255, 255, 255, 0.9)!important;
}
</style>
</head>
<body style="height: 2000px">
<div class="navwrap" id="navwrap">
    <div class="nav">
        <ul>
            <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>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $(window).on('scroll',function() {
		var scroll = $(window).scrollTop(),
			mainHeader = $('#navwrap'),
			mainHeaderHeight = mainHeader.innerHeight();

		// console.log(mainHeader.innerHeight());
		if (scroll > 2) {
			$("#navwrap").addClass("sticky");
		}else{
			$("#navwrap").removeClass("sticky");
		}
	});
});
</script>
</body>
</html>

不管你怎么滚动网站，不管网站主体内容再长，这个导航栏一直固定在顶部，用户也不用回到顶部点击了。