怎么在离开顶部的时候显示浮动操作按钮和点击回顶部事件

海内存知己 天涯若比邻

怎么在离开顶部的时候显示浮动操作按钮和点击回顶部事件?

怎么让应用栏在划过某一区域后触发事件?

回到某一区域后再触发事件?



共 1 个回答
举头望涵涵,低头思第一。 https://www.dffzmxj.com

离开顶部显示FAB和“点击回顶部事件”:

<button class="mdui-fab mdui-fab-hide">买</button>
<div class="mdui-hidden">点击回顶部</div>
<script>
    addEventListener('scroll', () =>
        scrollY && //scrollY > 0
        document.querySelector('.mdui-fab-hide').classList.remove('mdui-fab-hide') || //remove方法返回undefined
        document.querySelector('.mdui-hidden').classList.remove('mdui-hidden')
    );
</script>

划过(即在此元素上方)某一区域触发事件:

<!--父元素是 body-->
<header class="mdui-appbar mdui-appbar-fixed"></header>
<aside>某一区域</aside>
<script>
    //如果这些元素的高度、位置会变化,不要用const.
    const areaTop = document.querySelector('aside').offsetTop;
    const areaBottom = areaTop + document.querySelector('aside').offsetHeight;
    const appbarHeight = document.querySelector('.mdui-appbar').offsetHeight;
    addEventListener('scroll', () =>
        scrollY + appbarHeight > areaTop &&
        scrollY + appbarHeight < areaBottom &&
        dispatchEvent(new Event('scrolled'))
    );
    addEventListener('scrolled', handler); //handler为事件处理函数。
</script>

回到某一区域后再触发事件:前边的代码会帮你做到。

演示地址: https://codepen.io/dffzmxj/pen/qBOPqvo