导航栏吸顶，图片轮播，表单滚动及其无缝实现的总结
一、导航栏吸顶效果的实现
导航栏吸顶效果可以用js和css两种方法都能实现
1.js方法
在 JavaScript 中，我们监听滚动事件，并在
stickyNavbar函数中根据滚动位置添加或移除sticky类。sticky类设置position: fixed; top: 0; 实现吸顶效果，z-index: 1000;属性使其显示在其他内容上方
使用
navbar.offsetTop获取导航栏的初始位置，并通过window.pageYOffset检测当前的滚动位置。在导航栏滚动到页面顶部的时候，添加sticky类，使其实现吸顶效果
2.css方法
直接使用sticky的布局状态
position: sticky 在 CSS 中是一种相对和绝对定位的结合方式，通常用于创建可以在滚动时“粘附”到视口某个位置的元素。要理解 position: sticky 如何影响原本的 relative 布局，我们可以从以下几个方面进行分析：
1. 定位类型的理解
relative: 当元素的position设置为relative时，它会相对于其原本在文档流中的位置进行定位。这意味着在视觉上它可能会被移动，但占用的空间仍然是它在文档流中原有的位置。sticky: 当元素的position设置为sticky时，它首先表现为relative，并在页面滚动到特定位置时变为fixed。换句话说，元素会在其容器内相对其原位置进行定位，并在滚动时“粘附”到视口的特定位置。
2. 布局影响
当你将一个元素的
position从relative改为sticky时，它仍然保持在原有位置，直到滚动到定义的粘附点（例如top、bottom、left、right的值）。这意味着在未达到粘附条件之前，它的布局特性不会改变。sticky元素的行为使其在达到滚动阈值时固定在视口上，而此时它依旧保留了relative布局的特点，即它仍然在文档流中占据空间，不会影响到其他相邻元素的布局。
（也是在寻找实现吸顶效果方法的途中找到的，原本打算用js，结果发现css的方法十分便捷好用）
二、图片轮播效果的实现
1. HTML 结构
使用一个包含所有图片的外层容器，例如一个
<div>元素。每张图片放在一个子元素中，可以使用
<img>标签或背景图。
2. CSS 样式
设置外层容器的宽度和高度。
隐藏所有图片，除了当前显示的图片。
使用
position: absolute;来定位图片。
3. JavaScript 功能
选择器获取元素，设置当前图片索引。
编写函数来显示当前图片，并更新索引。
添加按钮事件监听，处理上一张和下一张的切换逻辑。
4. 自动轮播
可以使用
setInterval设置定时器来实现自动轮播功能。
5.图片轮播无缝效果的实现思路
非无缝的轮播图从第一张或最后一张切换到另一头的时候会有经过所有图片的动画，显得拖沓
在1号图片的前面添加一张3号图片，最后一张同理，在切换至最后一张3号的时候，再往后切，取消跳转的渲染效果直接跳转到第一张1号图片前面的3号图片，接着衔接跳转到第一张1号图片的动画，实现无缝轮播图
三、列表纵向滚动效果的实现
1.大体功能实现的思路
与轮播图的实现思路类似，
区别在于：轮播图的转变效果是使横着的一排图片的位置发生变化，每一次变化使横坐标移动一个图片的宽度，并添加过渡效果。
列表的纵向滚动是使一个列表在纵向的位置慢慢变化，每次变动改变其位置的纵向相对位置，改变幅度小但改变频次高实现的视觉动画效果
2.无缝效果的实现思路
复制一个列表位于原列表的下方跟随列表一起滚动，由于可见部分只有一个列表的视窗，所以就实现了单个列表的纵向滚动。
接着设置其滚动高度和范围在一个列表高度，滚动了一个列表高度的时候（即正好显示完整第二个复制列表）立即使滚动高度清零，其视觉效果从第二个复制列表直接过渡到第一个列表，就完成了无缝滚动的效果。