时间戳

首页 > 解决方案 > 取消固定后输入位置

javascript - 取消固定后输入位置

问题描述

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

$("*").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
    });

});

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

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

在此先感谢您的帮助。

标签： javascriptjqueryhtmlcssjquery-ui

解决方案

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

使用window.scrollY并将其添加到您e.clientY以使您Y-Pos与卷轴相关。

另外，使用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>

推荐阅读