Question

我有一个固定在页面右下角的按钮；

.btn-this{
 width: 313px;
 height: 61px;
 background-color: #ebb762;
 position: fixed;
 bottom: 0;
 right: 0;
 z-index: 99;
}

所以我想在页面的特定位置滚动后将按钮的位置从“固定”更改为“相对”；

现在起初我为我完成了这项工作：

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 457) {
            masinfo.css('position', 'relative');
        } else {
            masinfo.css({
                position: 'fixed',
                bottom: '0'
            });
        }
    });
});

但是后来我确实发现这不是一个高质量的解决方案，因为我必须粘贴并更改每个页面的代码，而且永远都不会顺利。

所以我确实检查了这两个帖子：
Check if a user has scrolled to the bottom

How could I add a class of "bottom" to "#sidebar" once it reaches the bottom of its parent container?

但是再说一次，我不能使其顺利运行，代码可以工作，但是执行时间很多，

使用时：

if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
    console.log('bottom');
}

控制台记录“底部” 11次；

我尝试使用防弹跳器，但我只是不理解这个概念，或者只是没有以正确的方式来做；

有人能做这样的事吗？

Answer 1

我看到3个可能的瓶颈：

全局事件侦听器（$（window）.scroll（））可能会附加几次（可能是如果您拥有SPA，其中导航不会重新加载页面，并且每个新页面都设置了一个处理程序）
滚动事件处理程序发生在每个滚动事件
...和处理程序冻结页面，直到页面结束-这是passive event listeners抢救的地方。

对于＃2，您通过反跳解决了此问题，但是最好查看您的代码（关于确切的反跳逻辑）。您可能以错误的方式进行操作，因此不仅会调用上一个事件调度处理程序，而且还会每次调用（有一定延迟）

对于＃3 jQuery does not support来说，它还没有，因此您需要使用低级的addEventListener。

Answer 2

反跳功能会限制该功能的触发速率。进一步了解debounce function 还有一种方法可以改善动画/滚动的性能，即requestAnimationFrame

因此您的函数可以写为

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        // If there's a timer, cancel it
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        // Setup the new requestAnimationFrame()
        timeout = window.requestAnimationFrame(function () {
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
                console.log('bottom');
            }
        });
    });
});

用户滚动到页面底部时的性能问题

2 个答案: