页面菜单悬浮置顶效果

收藏

本帖最后由 Simon.Sun 于 2023-8-29 09:21 编辑

最近好多格友都问了，我们插件商城中的页面往上滚动，菜单就置顶悬浮的功能是怎么实现的

菜单项悬浮.gif

不得不说这个效果确实牛，所以应该不怎么好实现。真应了那句话了，越漂亮的越难得到

于是我们找了内部的开发大佬，给大家抽出了一个demo

主要的精髓其实就是在页面的加载命令中，写的核心的Js以及一个设计悬浮单元格命令的插件，
这个插件产品化之后也会上架商城
image.png304027098.png

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);