使用Jquery使绝对按钮具有粘性动画

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<button id="sticky-btn">按钮</button>

#sticky-btn {
  position: absolute;
  top: 100px;
  left: 100px;
  /* 其他样式设置 */
}

$(document).ready(function() {
  // 获取按钮元素
  var $stickyBtn = $("#sticky-btn");
  // 获取按钮初始位置的偏移量
  var initialOffsetTop = $stickyBtn.offset().top;

  // 页面滚动时触发事件
  $(window).scroll(function() {
    // 获取页面滚动的距离
    var scrollTop = $(window).scrollTop();

    // 判断是否达到触发条件（例如滚动到某个特定位置）
    if (scrollTop > 200) {
      // 添加固定样式和动画效果
      $stickyBtn.addClass("sticky");
      $stickyBtn.animate({
        top: 20, // 按钮固定在页面顶部的位置
        opacity: 0.8 // 按钮的透明度
      }, 500); // 动画持续时间
    } else {
      // 移除固定样式和动画效果
      $stickyBtn.removeClass("sticky");
      $stickyBtn.animate({
        top: initialOffsetTop, // 按钮返回到初始位置
        opacity: 1 // 按钮的透明度
      }, 500); // 动画持续时间
    }
  });
});

.sticky {
  position: fixed !important;
  top: 20px !important;
  /* 其他样式设置 */
}