这里为大家提供一种基于jQuery实现顶部导航随滚动条滚动固定浮动在顶部的方式。
首先,页面头部需要包含jQuery库的引用。使用CDN可行性较高,此处使用jQuery官方CDN。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
然后,实现导航的固定和解除固定,我们需要用到jQuery的scroll事件以及一些CSS控制。
示例一,通过添加固定class来实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery顶部导航固定示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
/* 模拟页面滚动 */
.content {
margin-top: 100px;
}
/* 导航默认样式 */
.nav {
width: 100%;
height: 50px;
background-color: #F3F3F3;
/* 使导航在顶部浮动 */
position: fixed;
top: 0;
}
/* 导航固定时的样式 */
.nav-fixed {
background-color: #FFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* 页面滚动时的钩子样式 */
.scroll-hook {
height: 50px;
}
</style>
</head>
<body>
<!-- 导航条 -->
<nav class="nav">
<ul>
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
<li><a href="#s3">Section 3</a></li>
</ul>
</nav>
<!-- 内容区 -->
<div class="content">
<div class="scroll-hook"></div>
<div id="s1">Section 1</div>
<div id="s2">Section 2</div>
<div id="s3">Section 3</div>
</div>
<!-- 导航条占位符 -->
<div class="nav-placeholder"></div>
</body>
<script>
$(window).scroll(function () {
// 当前页面滚动位置
var scrollH = $(window).scrollTop();
// 导航条目标固定位置锚点
var navTop = $(".scroll-hook").offset().top;
// 添加或移除固定class
if (scrollH >= navTop) {
$(".nav").addClass("nav-fixed");
$(".nav-placeholder").show();
} else {
$(".nav").removeClass("nav-fixed");
$(".nav-placeholder").hide();
}
})
// 根据导航宽度创建对应高度的占位符
$(".nav-placeholder").height($(".nav").outerHeight(true));
</script>
在这个示例中,我们通过滚动事件监听页面滚动的位置,当页面滚动到导航条顶部时,给导航条添加.nav-fixed样式,相应地修改背景色和阴影样式,使其在页面顶部悬浮,同时通过占位符占据导航条原本在文档流中占据的空间。
示例二:通过改变导航条position属性值来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery顶部导航固定示例</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
/* 导航默认样式 */
.nav {
width: 100%;
height: 50px;
background-color: #F3F3F3;
}
/* 导航固定时的样式 */
.nav-fixed {
background-color: #FFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
/* 使导航在顶部浮动 */
position: fixed;
top: 0;
}
/* 模拟页面滚动 */
.content {
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 导航条 -->
<nav class="nav">
<ul>
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
<li><a href="#s3">Section 3</a></li>
</ul>
</nav>
<!-- 内容区 -->
<div class="content">
<div id="s1">Section 1</div>
<div id="s2">Section 2</div>
<div id="s3">Section 3</div>
</div>
<script>
var navTop = $(".nav").offset().top;
$(window).scroll(function () {
var scrollH = $(window).scrollTop();
if (scrollH >= navTop) {
$(".nav").addClass("nav-fixed");
} else {
$(".nav").removeClass("nav-fixed");
}
});
</script>
</body>
</html>
在此示例中,我们没有通过占位符将导航条原本所占的空间保留下来,并且没有手动设置占位符高度,而是通过初始时记录导航条顶部的位置,这样也便于实现导航条锁定滚动之后的位置,为之后的动画等样式易于设定提供方便。
使用哪种实现方法,取决于设计和个人偏好。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery 顶部导航跟随滚动条滚动固定浮动在顶部 - Python技术站