javascript - 取消固定后输入位置

Question

我有一个输入，我想将其放置在我每次在其他任何地方用鼠标单击屏幕的任何区域。

$("*").mouseup(function(e) {

    var x, y;

    x = e.clientX;
    y = e.clientY;

    $(".myInput").css({
        "position": "fixed",
        "z-index": "100",
        "margin-top": y,
        "margin-left": x
    });

});

通过上面的代码，输入确实到达了我想要的位置，但是因为它固定位置然后它随着屏幕的滚动而移动。

我尝试了所有的位置选项。

预先感谢您的帮助。

Answer 1

您可以使用 absolute 而不是 fixed 这将阻止它在您滚动时粘住页面。

Use window.scrollY and add it to you e.clientY to make your Y-Pos relative to the scroll.

此外，使用 top 和 left 而不是使用 margin-top 和 margin-left。

---

$(document).mouseup(function(e) {
  var x, y;

  x = e.clientX;
  y = e.clientY + window.scrollY;

  $(".myInput").css({
    "position": "absolute",
    "z-index": "100",
    "top": y,
    "left": x
  });

});

div {
  height: 1000px;
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="myInput" />
<div></div>