当页面完成加载时，jquery scroll事件会延迟触发

Question

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

prestashop 1.7附带jquery 2.2.4。

我想有一个用户的浮动手推车图标，将坚持左侧:0顶部:50%，当用户滚动页面时，将动画它的重新定位。

所以我的浮动购物车有了这个初始的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");
        });
    }); 
});

结果是完全一样的。

所以我改变了浮动购物车的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属性。

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