适用于浮动元素在一个盒子中,当盒子没滑到底部时,像sticky一样处于页面最底部,bottom:0;

当盒子滑到底部显示footer区域时,浮动元素在盒子中的最底部,不再是页面的最底部;

可以根据它下面的一个footer元素是否显示,切换absolute和fixed来实现sticky的替代方案

function set_float_position() {
  const float=$(".float");   //浮动元素
  const footer=$("footer"); //底部区域
  const footerRect = footer[0].getBoundingClientRect();
  const windowHeight = window.innerHeight;

  // 计算元素露出部分的高度
  const visibleHeight = Math.min(
    footerRect.height, // 元素总高度
    windowHeight - footerRect.top // 视口底部到元素顶部的距离(即露出部分)
  );

  // 确保可见高度 >= 0(避免负数)
  const actualVisibleHeight = Math.max(0, visibleHeight);
  if (actualVisibleHeight > 0) {
    float.css("position", "absolute");
  } else {
    float.css("position", "fixed");
  }
}

  

posted on 2025-07-16 17:22  随心的博客  阅读(20)  评论(0)    收藏  举报