JQuery .offset() 不设置 'top' 值

Question

我正在尝试动态地将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;
}

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