Question

我试图将div的偏移量动态设置为四个不同的位置;

左上角
右上角
左下角
右上角

我当前的解决方案依赖于输入元素的.position（）。但是，在使用.css（）和.offset（）之后，我只能设置＆＃39; left＆＃39;偏移但不是顶级＆＃39;，非常奇怪。

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;
    }

Answer 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()。

JQuery .offset（）没有设置＆＃39; top＆＃39;值

1 个答案: