时间戳

首页 > 解决方案 > Debounce 功能未检测到用户何时到达页面顶部，因为它设置为在前沿与后沿触发

javascript - Debounce 功能未检测到用户何时到达页面顶部，因为它设置为在前沿与后沿触发

问题描述

我有一个 javascript 函数可以更改滚动上的徽标。我正在使用 underscore.js 的 debounce 功能来防止滚动事件在用户滚动页面时连续触发。我已将 debounce 功能设置为立即触发（相对于滚动的后沿），以便徽标转换没有任何滞后时间（当前设置的等待时间为 2 秒）。问题是，如果用户向下滚动页面，然后向上滚动回顶部，则徽标永远不会转换回来，因为 debounce 函数在 scrollTop 达到 0 之前触发。在这种情况下，有什么建议可以让 debounce 函数触发吗？

如果我在滚动的后沿触发去抖动功能，则在加载徽标之前会有延迟时间（2 秒）。CSS 过渡不能解决这个问题，因为徽标被设置为背景图像。我希望有一个javascript解决方案而不是css hack（交叉淡入淡出悬停或其他东西。）我需要编写两个单独的函数吗？一个用于向下滚动，一个用于向上滚动？

function scrollHeader() {

            var top_offset = $(window).scrollTop();
            var logo = $('.site-title a')[0];
            var siteHeader = $('.site-header');
            if (top_offset == 0) {
                siteHeader.removeClass('scrolled');
                logo.setAttribute('style', 'background-image: url( "logo.svg" ) !important');
            }

添加了 else if 条件以防止徽标在每个滚动事件上重新加载（否则 Chrome 会导致闪烁问题）

 else if ( top_offset !== 0 && siteHeader.hasClass('scrolled')) {
                console.log ('header has scrolled class and is not at top');
            } else {
                siteHeader.addClass('scrolled');
                logo.setAttribute('style', 'background-image: url( "logo.svg" ) !important');
            }
    }

调用 debounce 函数（将其设置为 true 会立即触发函数而不是后沿）：

    $(window).on('scroll', _.debounce(scrollHeader, 200, true));

如果您想查看此问题的实际效果，请访问该网站的链接：http: //205.134.254.129/~kosedigital/

标签： javascriptjqueryunderscore.js

解决方案

推荐阅读