更新

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的包含是否不包含router.currentRoute.params.id属性。

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

页面完成加载后，jquery滚动事件会在延迟时触发

更新

1 个答案: