JQuery .offset() 未设置“顶部”值答案

【问题标题】：JQuery .offset() doesn't set 'top' valueJQuery .offset() 未设置“顶部”值
【发布时间】：2017-08-03 15:37:21
【问题描述】：

我正在尝试将 div 的偏移量动态设置为四个不同的位置；

左上角
右上角
左下
右上角

我当前的解决方案依赖于输入元素的 .position() 。然而，在使用 .css() 和 .offset() 之后，我只能设置“左”偏移，而不能设置“顶部”，很奇怪。

var position_picker = function () {
    const container = $(".np-container");
    const pos = $("#NumberPicker").position();

    switch (position) {
        case "top-left":
            top = pos.top;
            left = pos.left;
            container.addClass("top-left");
            break;
        case "top-right":
            top = parseInt(container.height());
            left = parseInt($("#NumberPicker").width()) - parseInt(container.width()) + pos.left;
            container.addClass("top-right");
            break;
        case "bottom-right":
            top = pos.top + parseInt($("#NumberPicker").height());
            left = parseInt($("#NumberPicker").width()) - parseInt(container.width()) + pos.left;
            container.addClass("bottom-right");
            break;
        default:
            top = pos.top + parseInt($("#NumberPicker").css("height"));
            left = pos.left;
            container.addClass("bottom-left");
            break;
    }

    $(".np-container").offset({
        top: top + parseInt($("#NumberPicker").css("marginTop")),
        left: left + parseInt($("#NumberPicker").css("marginLeft"))
    })
}

$(".np-container") 是我试图动态定位的元素，而 $("#NumberPicker") 是它的偏移量所依赖的输入。

$(".np-container") 的 CSS 如下

.np-container {
    position: absolute;
    border: 1px solid #ddd;
    display: none;
    margin-top: 5px;
    border-radius: 3px;
}

    .np-container:before {
        content: '';
        border: 10px solid transparent;
        border-bottom-color: #ddd;
        position: absolute;
    }

    .np-container > .np-body {
        padding: 5px 3px;
        overflow-y: scroll;
    }

【问题讨论】：

你能把css也给我们吗？
@Ivan css 被包括在内，不确定它是否相关 - 除了position: absolute;。 .np-container 在输入的焦点上可见。

标签： javascript jquery html css offset

【解决方案1】：

仍然不太清楚是什么原因造成的，尽管我使用了不同的方法来实现我所需要的；

    var position = element.position();
    var offset = element.offset();

    if (options.position === "auto") {
        options.position =
            (offset.top + widget.height() * 1.5 >= $(window).height() + $(window).scrollTop() &&
                widget.height() + element.outerHeight() < offset.top)
            ? "top"
            : "bottom";
        options.position += (parent.width() < offset.left + widget.outerWidth() / 2 &&
                offset.left + widget.outerWidth() > $(window).width())
            ? "-right"
            : "-left";
    }

发现了一些考虑输入元素位置并设置与窗口相关的选择器位置的魔法。

    switch (options.position) {
        case "top-left":
            obj = {
                top: position.top - widget.outerHeight() - element.outerHeight(),
                left: (parent === element ? 0 : position.left),
            };
            widget.addClass("top-left");
            break;
        case "top-right":
            obj = {
                top: position.top - widget.outerHeight() - element.outerHeight(),
                left: position.left - (widget.outerWidth() - element.outerWidth()),
            };
            widget.addClass("top-right");
            break;
        case "bottom-left":
            obj = {
                top: position.top + element.outerHeight(),
                left: (parent === element ? 0 : position.left),
            };
            widget.addClass("bottom-left");
            break;
        case "bottom-right":
            obj = {
                top: position.top + element.outerHeight(),
                left: position.left - (widget.outerWidth() - element.outerWidth()),
            };
            widget.addClass("bottom-right");
            break;
    }

我的 switch 语句使用不同的逻辑但保持相同的结构。

    margins = {
        top: parseInt(element.css("marginTop")) === NaN ? 0 : parseInt(element.css("marginTop")),
        bottom: parseInt(element.css("marginBottom")) === NaN ? 0 : parseInt(element.css("marginBottom")),
        left: parseInt(element.css("marginLeft")) === NaN ? 0 : parseInt(element.css("marginLeft")),
        right: parseInt(element.css("marginRight")) === NaN ? 0 : parseInt(element.css("marginRight"))
    }

    obj.top += obj.top !== "auto" ? margins.top + margins.bottom : "";
    obj.left += obj.left !== "auto" ? margins.left - margins.right : "";
    obj.bottom = "auto";
    obj.right = "auto";

    widget.css(obj);

最后我像以前一样考虑了边距，但是用构建的 obj 对象设置.css()。

【讨论】：