javascript - 当页面完成加载时，jquery 滚动事件延迟触发

Question

我正在为 prestashop 1.7 创建主题，但我真的不认为这与我遇到的问题有关。 (更新:我认为这可能与 prestashop 的运作方式有关，因为作为独立的它可以正常工作)

prestashop 1.7 附带 jquery 2.2.4。

我想为用户提供一个 float 的购物车图标，该图标将固定在 left:0 top:50%，并且当用户将页面滚动到将动画重新定位时。

所以我的 float 购物车有这个初始 CSS:

div#floating_cart {
  position: absolute;
  top: 50%;
  left: 1%;
}

这是捕捉滚动的javascript代码:

   $(window).scroll(function () {
        $('#floating_cart').animate({top:Math.floor($(window).scrollTop() +(window.innerHeight/2))},100,"swing");
    });

问题是在页面加载后我尝试滚动，仅在 4-5 秒后购物车开始其堆栈中的所有重新定位动画。

有什么想法可以解决这个延迟吗？

更新

如果我只设置 position:fixed，购物车会毫无问题地停留在选定的位置。但我想让它有点动画。

所以我尝试使用以下代码:

$(function() {

    $(window).on("load", function () {
        $(window).scroll(function () {
            $('#floating_cart').css('position', 'absolute');
            $('#floating_cart').stop();
            $('#floating_cart').animate({top: Math.floor($(window).scrollTop() + (window.innerHeight / 2))}, 300, "swing");
        });
    }); 
});

结果完全一样。

所以我改变了 float 购物车的CSS:

div#floating_cart {
  position: fixed;
  top: 49%;
  left: 1%;
}

我在附加到滚动之前添加了 8 秒的延迟，并将位置设置为 absolute 而不是 fixed。

$(function() {

    $(window).on("load", function () {
        setTimeout(function() {
            $(window).scroll(function () {
                $('#floating_cart').css('position', 'absolute');
                $('#floating_cart').stop();
                $('#floating_cart').animate({top: Math.floor($(window).scrollTop() + (window.innerHeight / 2))}, 300, "swing");
            });
        },8000);

    });
});

现在我认为这可能与 prestashop 加载内容的方式有关。 我怎样才能进一步调查这个问题？加载页面时代码被压缩，因此很难调试

Answer 1

也许它不起作用，因为您在页面加载时没有所有可用的资源。尝试检查 jquery 的包含是否没有使用 async 属性。

您还可以在大多数网络浏览器中通过网络资源检查器在页面加载时录制脚本