手机上的Fancybox内联弹出窗口不随页面滚动移动 [英] Fancybox inline popup on mobile not moving with page scroll

问题描述

我正在此网站上工作: http://www.fairfaxandroberts.com.au/

I am working on this website: http://www.fairfaxandroberts.com.au/

我正在使用fancybox进行内联弹出式窗口: http://fancyapps.com/fancybox/

And I am using fancybox for inline popup: http://fancyapps.com/fancybox/

当您访问该网站时，您可以看到滚动时instagram提要下方显示的弹出窗口.

When you visit the site you can see the popup that is shown down below the instagram feed when you scroll.

在台式机和更大版本上，它运行良好，但在移动版本上，当您在insta feed下方滚动时，会显示弹出窗口，但它会停留在显示位置，不会随着向后滚动页面而移动.

On desktop and larger version it is working well, but on mobile versions the popup is shown when you scroll below insta feed, but it stays on the position where it is shown, it doesn't move with the page scroll behind.

我用来显示Fancybox的jQuery代码是这样的:

The jQuery code I use to display Fancybox is this:

                    $(window).scroll(function() {
                        var y = $(window).scrollTop();
                        var insta_feed_top = $("#slide-55").offset().top;
                        if (y > insta_feed_top) {
                        $(window).off('scroll');
                        $(".fancybox_newsletter")
                            .fancybox({
                                helpers: {
                                    overlay: {
                                      locked: false
                                     }
                                 }
                                }).trigger('click');                              
                        }

                    });

有什么问题?我做了很多尝试，看到了网站上的文档，但无济于事.

What can be the issue guys? I tried a lot, saw the documentation on the site, but nothing works.

推荐答案

[解决方案]

在移动设备上进行调试后，我发现移动设备的位置绝对发生了变化.我只是将位置更改为固定，添加了一些顶部和左侧边距，一切看起来都很完美.

Guys after debugging on the mobile, I found that the position was changing on absolute for mobile devices. I just changed the position to be fixed, added some top and left margin and everything looks perfect.

再次感谢.

这篇关于手机上的Fancybox内联弹出窗口不随页面滚动移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！