页面菜单悬浮置顶效果
本帖最后由 Simon.Sun 于 2023-8-29 09:21 编辑最近好多格友都问了，我们插件商城中的页面往上滚动，菜单就置顶悬浮的功能是怎么实现的
不得不说这个效果确实牛，所以应该不怎么好实现。真应了那句话了，越漂亮的越难得到;P
于是我们找了内部的开发大佬，给大家抽出了一个demo
主要的精髓其实就是在页面的加载命令中，写的核心的Js以及一个设计悬浮单元格命令的插件，
这个插件产品化之后也会上架商城
JS代码是
const pageScrollHandler = () => {
const isTabHeaderVisible = isElementVisible(".tab_menu");
if (isTabHeaderVisible) {
//tab页头可见则隐藏电梯菜单
Forguncy.CommandHelper.executeCellCommand("隐藏电梯菜单");
//电梯菜单隐藏的同时需要设置tab页的缺省选中页
Forguncy.CommandHelper.executeCellCommand("设置tab页缺省选中项目");
}
else {
//tab页头不可见则显示电梯菜单
Forguncy.CommandHelper.executeCellCommand("显示电梯菜单");
}
}
//判断dom元素是否可见
const isElementVisible = (element, fullyInView = false) => {
const pageTop = $(window).scrollTop();
const pageBottom = pageTop + $(window).height();
const elementTop = $(element).offset() == undefined ? undefined : $(element).offset().top;
const elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
$(window).on("scroll", pageScrollHandler);
主要的作用就是通过判断上面的菜单是否被滚动走了，如果滚动走了，
就让页面最下面的电梯菜单悬浮在页面上方
demo的效果如下，目前还是一个毛坯房，大家使用的时候可以用css调整样式，精修就靠大家了:loveliness:
最后附上demo（大家使用的时候切不可忽略页面单元格设置的别名，代码中需要用这个定位页面元素）
这里再补充个方案供大家选择（PC 和手机端实现的思路类似，具体看下面的 demo）：
原理呢简单来讲：菜单吸顶的效果，可以利用 CSS 去实现，那么我们可以选择去监听页面的滚动事件，当页面滚动到一定位置后去修改页面上元素的 CSS，让我们想要的元素吸顶固定。这块呢在下面 demo 里的模板命令去处理了，大家再使用时直接使用下面的模板命令即可。
这里解释下这个模板命令两个参数的用途。第一个参数 HolderClassName 表示页面上占位元素，在滚动时用来判断当前元素距离浏览器顶端的距离，当该元素滚动不见时，就会让类名为 CeilingClassName 的页面元素浮动置顶。说起来可能不太清楚，大家可以直接查看 demo：
页:
[1]