适用于浮动元素在一个盒子中,当盒子没滑到底部时,像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");
}
}
浙公网安备 33010602011771号