Javascript 将鼠标悬停在列出的项目文本上时会显示图像

我使用Javascript在导航时悬停在上面以显示图像。当“我的导航”上的列表溢出并且需要滚动时，就会出现问题。图像将出现在顶部的类似位置，因此在破坏干净功能的位置裁剪图像。我希望图像总是出现在正确的文本旁边，同时出现在文本下面

为了让它显示在文本下方，我在HTML中插入了一个插入图像，但我不确定我是否以正确的方式插入了它，因为它最终覆盖了最后列出的项目，或者如果我在开始时插入它，它将覆盖这一点

因此，我在这里使用模板函数，并在这里将其修改为我的JSFIDLE：

这将如何实现？我需要跟踪列表的位置吗？我该怎么做

function previewImages() {
  /* CONFIG */

  xOffset = 280;
  yOffset = 380;

  // these 2 variable determine popup's distance from the cursor
  // you might want to adjust to get the right result

  /* END CONFIG */

  $("a.imagereveal").hover(function(e) {

      var $this = $(this); // caching $(this)

      $("#insertimage").append("<div id='previewImage'><img src='" + this.rel + "' alt='rens preview image' />" + "</div>");

      $("#previewImage")
        .css("top", (e.pageY - xOffset) + "px")
        .css("left", (e.pageX + yOffset) + "px")
        .fadeIn("fast");
  },
  function() {
      $("#previewImage").remove();
  });

  $("a.screenshot").mousemove(function(e) {
    $("#previewImage")
      .css("top", (e.pageY - xOffset) + "px")
      .css("left", (e.pageX + yOffset) + "px");
  });
};

previewImages();

---

如果我理解正确，您的问题是，当用户向下滚动时，滚动时的图像会出现在帧外。。。 要实现这一点，您需要知道用户向下滚动多少像素，然后将此值添加到图像位置

---

首先，我为可滚动内容中的元素添加了一个唯一的id，我选择了第一个元素中的第一个

太好了，很快就到了！非常感谢。我可以检查页面的位置吗？如果靠近底部，它会偏移位置并将其放置得更高吗？因为有些项目在悬停在页面底部时也会被裁剪。

    <div class="nav-underline nav-title" id="checkScroll">
      Name
    </div>

var scroll=$("#checkScroll").offset().top;

.css("top", (e.pageY - xOffset -scroll) + "px")
.css("left", (e.pageX + yOffset) + "px")

  xOffset = 100;
  yOffset = 200;