jQuery FancyBox:滚动时弹出窗口相对于窗口的固定位置

问题描述：

滚动页面时，如何在屏幕上固定 fancybox 弹出窗口的位置?
该插件中有任何选项，还是我必须使用css进行定义?

How can I fix the position of fancybox popup window on the screen when scrolling the page?
Is there any options in this plugin or I have to define it using css?

答

简单地使用centerOnScroll API选项的问题是，当您上下滚动页面时，您会注意到您的fancybox窗口必须赶上"因为它不断尝试制作动画以使其回到中心位置.这会导致看起来不那么好的生涩"运动.

The problem with simply using the centerOnScroll API option is that while you scroll up and down the page, you will notice that your fancybox window has to "catch up" as it continuously tries to animate to get it back to the center position. This causing a "jerky" movement that doesn't look so great.

如果您不介意编辑Fancybox源代码，可以使用的解决方案是找到fancybox_get_viewport函数并进行更改.我正在使用Fancybox 1.3.4.所以找到这个:

A solution you can use if you don't mind editing the Fancybox source code is to find the fancybox_get_viewport function and change it. I am using Fancybox 1.3.4. So find this:

        _get_viewport = function() {
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            $(document).scrollLeft() + currentOpts.margin,
            $(document).scrollTop() + currentOpts.margin
        ];
    },

并替换为:

        _get_viewport = function() {
        var isFixed = wrap.css('position') === 'fixed';
        return [
            $(window).width() - (currentOpts.margin * 2),
            $(window).height() - (currentOpts.margin * 2),
            (isFixed ? 0 : $(document).scrollLeft()) + currentOpts.margin,
            (isFixed ? 0 : $(document).scrollTop()) + currentOpts.margin                
        ];
    },

这可以解决问题，现在当您上下滚动页面时，它将完美地位于浏览器的同一位置.唯一的问题是，此更改会导致一些动画问题，其中有时会在屏幕底部显示一个新的弹出窗口.要解决此问题，还需要进行一些更改.在第378行周围更改此内容:

This fixes the problem and now when you scroll up and down the page it will stay perfectly in the same spot in your browser. The only problem is this change causes a few animation problems where sometimes a new popup will appear to come from the bottom of the screen. To fix that requires a few more changes. Around line 378 change this:

                start_pos = {
                top  : pos.top,
                left : pos.left,
                width : wrap.width(),
                height : wrap.height()
            };

收件人:

            final_pos = {
            top  : ((wrap.css('position') === 'fixed') ? pos.top - $(this).scrollTop() : pos.top),
            left : pos.left,
            width : wrap.width(),
            height : wrap.height()
        };

，在978行附近，您会看到相同的内容.在那里也要更换.那应该可以解决该修复程序附带的动画问题.

and around line 978 you will see the same thing. Replace there as well. That should fix the animation problems that come along with the fix.

最后在Fancybox的CSS中找到:

Finally in your CSS for Fancybox find:

#fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

并替换为:

#fancybox-wrap {
    position:fixed;
    top: 0;
    left: 0;
    padding: 20px;
    z-index: 1101;
    outline: none;
    display: none;
}

我希望这对希望自己的弹出窗口完全固定在屏幕上的人有所帮助，希望我对我有此解决方案，但必须自己解决:)

I hope this helps someone down the road who wants their popups to remain perfectly fixed on the screen, wish I had this solution for me, but had to figure it out myself :)

jQuery FancyBox:滚动时弹出窗口相对于窗口的固定位置

相关推荐