jquery. 底部弹性滑动

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。底部弹性滑动通常指的是页面底部元素在用户滚动到页面底部时产生的一种平滑的弹性效果。

类型

固定底部：页面滚动时，底部元素始终保持在视口底部。
弹性跟随：当用户滚动到页面接近底部时，底部元素开始缓慢跟随滚动，并在到达底部时产生弹性回弹效果。

应用场景

页脚信息：在网站底部显示联系信息、版权声明等。
回到顶部按钮：用户可以点击该按钮快速返回页面顶部。
加载更多内容：当用户滚动到页面底部时自动加载更多内容。

实现示例

以下是一个简单的 jQuery 示例，实现底部元素在滚动到页面底部时的弹性滑动效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 弹性滑动示例</title>
<style>
  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    transition: bottom 0.3s ease;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="content">
  <!-- 页面内容 -->
  <p>滚动查看底部效果...</p>
  <!-- 添加更多内容以使页面足够长 -->
</div>

<div id="footer">
  底部信息
</div>

<script>
$(window).scroll(function() {
  var footer = $('#footer');
  var footerHeight = footer.outerHeight();
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();

  if (scrollTop + windowHeight >= $(document).height() - footerHeight) {
    footer.css('bottom', -(footerHeight / 2));
  } else {
    footer.css('bottom', 0);
  }
});
</script>

</body>
</html>