如何使用 HTML CSS 和 jQuery 创建跟随效果？

跟随效果是指滚动页面时，元素会随着鼠标滚动并保持在固定位置的效果。在这篇文章中，我们将讨论如何使用 HTML、CSS 和 jQuery 来实现这一效果。

创建 HTML 片段

我们首先需要在 HTML 中创建要执行跟随效果的元素。在本例中，我们将创建一个名为“fixed-element”的 DIV 元素，该元素将保持在屏幕顶部并在滚动过程中一直可见。

<div class="fixed-element">
  <p>这是一个跟随效果！</p>
</div>

设置 CSS 样式

接下来，我们需要使用 CSS 设置 DIV 元素的样式。我们将使该元素固定在屏幕顶部，并通过设置“z-index”的值来确保它在视图中始终处于顶部。

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

添加 jQuery 代码

最后，我们需要添加 jQuery 代码。我们将创建一个名为“scroll”的事件，该事件在滚动过程中动态更改“fixed-element”的位置。

$(document).ready(function() {
  $(window).on("scroll", function() {
    var scrollTop = $(window).scrollTop();
    $(".fixed-element").css("top", scrollTop + "px");
  });
});

我们使用 jQuery 的“scrollTop”函数获取当前窗口滚动的距离，“css”函数则动态设置“fixed-element”的“top”属性。

现在我们已经完成了跟随效果的创建！请在本地代码编辑器中运行我们的代码片段，并滚动页面以查看效果。如果您需要进一步完善代码，请随意更改 CSS 样式和 jQuery 代码，以满足您的需求！

参考链接：How to Create Follow Scrolling Effect using HTML CSS and jQuery?