jq简单实现吸顶和回顶部详细步骤与说明

最新推荐文章于 2022-02-23 10:18:37 发布

温L

最新推荐文章于 2022-02-23 10:18:37 发布

阅读量846

点赞数 1

文章标签： css css3 html 前端 html5

本文链接：https://blog.csdn.net/lwf0829/article/details/121277112

版权

实现的效果是：

当滚动距离到达一定位置时会触发吸顶效果，让回顶部按钮出现

当滚动距离小于一定高度是不吸顶，回顶部按钮消失

点击回顶部页面和滚动距离都回到顶部

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
				/* 设置头部高和颜色 */
			.header{
				height: 120px;
				background-color: #0000FF;
				}
				/* 设置导航高和颜色 */
			.nav{
					line-height: 40px;
					background-color: #00FFFF;
					
				}
				/* 设置内容高和背景颜色 */
			.content{
					height: 3000px; 
					background-color: #F5F5DC;
				}
			/* 设置距离顶部的高度和nav高度保持一致 */
			.sticky{
				padding-top: 40px;
			}
			/* 设置定位 */
			.sticky .nav{
				position: fixed;
				left: 0;
				top:

最低0.47元/天解锁文章

温L

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq简单实现吸顶和回顶部详细步骤与说明

实现的效果是：当滚动距离到达一定位置时会触发吸顶效果，让回顶部按钮出现当滚动距离小于一定高度是不吸顶，回顶部按钮消失点击回顶部页面和滚动距离都回到顶部整体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></...
复制链接

扫一扫