Question

我正在开发一个使用同位素以网格形式布置多个项目的网站。

我正在实施一个翻转系统，显示带有其他信息的弹出框。

问题是，在狭窄的屏幕上，弹出窗口向右流出屏幕，例如：

理想情况下，当滚动屏幕的右半部分时，我希望弹出窗口固定在右下角而不是左下角。

请问这怎么可能？

我发现这段代码看起来可能有效，但无法成功实现：

$(function() {
    $('.item-s').hover(function() {
        var win=$(this).find('.big-s:visible');
        if(win.length>0) {
            var screenwidth=$('body').width();
            var width=win.width();
            var pos=win.position();
            var rightpos=width+pos.left;
            if(rightpos>screenwidth) {
                var moveleft=rightpos-screenwidth;
                win.css('margin-left','-'+moveleft+'px');
            } else {
                win.css('margin-left','0px');
            }
        }
    });
});

Answer 1

这是使用jquery的组合来检测页宽并因此检测光标位置：

$(".item-s").mouseover(function(e){
    var pageWidth = $('body').width();
    if ( e.pageX > pageWidth / 2 ){
        $(this).toggleClass('special');
    }
});

并添加一个特殊的＆＃39; div转移到CSS以移动弹出窗口，如下所示：

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

在这里更新了参考小提琴：

https://jsfiddle.net/wsgfuace/5/

JQuery翻转工具提示从屏幕上消失 - 包括小提琴

1 个答案: