JQueryの.offset（）が 'top'の値を設定していません

Question

divのオフセットを4つの異なる位置に動的に設定しようとしています。

• 左上
• 右上
• 左下
• 右上

私の現在のソリューションは、入力要素の.position（）に依存しています。しかし、.css（）と.offset（）を使用した後、私は '左'オフセットを設定することができますが、 'top'ではなく、かなり奇妙です。 $("#NumberPicker")は、そのオフセットのために頼ることで入力されている間

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")

は、私が動的に位置しようとしてい要素です。

それでも私は私が必要なものを達成するために、異なる方法を使用しても、これを引き起こしたのか、あまりにもわから

.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

ではなく、次のように$(".np-container")ためのCSSです。

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

My 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()を設定します。