JQuery .offset（）沒有設置「頂部」值

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