Javascript 根据光标的Y位置向DIV添加CSS类

我正在处理的页面：

这里有一个项目名称列表。项目标题悬停时，会在下方显示其特色图像

如果鼠标光标的Y位置低于浏览器窗口高度的50%，我想将这些图像定位在标题上方

我想我需要在span中添加一个额外的类来重新定位它，但我不确定如何进行

非常感谢您的帮助：）

您可以使用jquery（我看到您已经在使用它）来完成这项工作

$(theTextElement).hover(function(e) {
  //Mouse Over Event
  //The Mouse Y Position
  var y = e.pageY;
  //The window height
  var windowY = $(window).height();
  //The mouse is past the halfway point of the screen
  if((windowY/2)<y){
    //Toggle the class
    $(theImageElement).addClass('viewTop');
    $(theImageElement).removeClass('viewBottom');
    //Show the element
    $(theImageElement).show();
  }
}, function() {
    $(theImageElement).hide();
});

$（文本元素）。悬停（函数（e）{
//鼠标悬停事件
//鼠标移动到Y位置
var y=e.pageY；
//窗高
var windowY=$（window.height（）；
//鼠标已过屏幕的中点
如果（（windowY/2）您可以使用jquery（我看到您已经在使用它）来实现这一点

$(theTextElement).hover(function(e) {
  //Mouse Over Event
  //The Mouse Y Position
  var y = e.pageY;
  //The window height
  var windowY = $(window).height();
  //The mouse is past the halfway point of the screen
  if((windowY/2)<y){
    //Toggle the class
    $(theImageElement).addClass('viewTop');
    $(theImageElement).removeClass('viewBottom');
    //Show the element
    $(theImageElement).show();
  }
}, function() {
    $(theImageElement).hide();
});

$（文本元素）。悬停（函数（e）{
//鼠标悬停事件
//鼠标移动到Y位置
var y=e.pageY；
//窗高
var windowY=$（window.height（）；
//鼠标已过屏幕的中点
如果（（windowY/2），您可以使用“onmousemove”事件跟踪网页内的鼠标位置。鉴于此，请将其Y位置与窗口高度进行比较，并相应更改类别

下面是一个事件侦听器，可以让您快速启动：

document.onmousemove = function(event) {
  // X position of cursor
  event.x;
  // Y position of cursor
  event.y;

  if(event.y < (window.innerHeight/2)) {
    // do something with image classes
  } else {
    // do something else
  }
}

document.onmousemove=函数（事件）{
//光标的X位置
事件x；
//光标的Y位置
事件y；
如果（事件y<（窗口内部高度/2））{
//对图像类做些什么
}否则{
//做点别的
}
}

出于性能原因，我建议将事件侦听器置于超时内。
您可以使用“onmousemove”事件跟踪网页内的鼠标位置。鉴于此，请将其Y位置与窗口高度进行比较，并相应更改类

下面是事件侦听器，它可以让您开始跳转：

document.onmousemove = function(event) {
  // X position of cursor
  event.x;
  // Y position of cursor
  event.y;

  if(event.y < (window.innerHeight/2)) {
    // do something with image classes
  } else {
    // do something else
  }
}

document.onmousemove=函数（事件）{
//光标的X位置
事件x；
//光标的Y位置
事件y；
如果（事件y<（窗口内部高度/2））{
//对图像类做些什么
}否则{
//做点别的
}
}

出于性能原因，我建议将事件侦听器置于超时内。
假设您已经知道event.target、window.innerHeight和event.clientY，使用position:fixed并相对于目标位置定位是一种方法。
假设您已经知道event.target、window.innerHeight和event.clientY，使用position:fixed和相对于目标位置的定位是一种方法。
我假设您希望坚持当前的实现，即
span
元素隐藏，直到悬停在上方

您可以使用

elem.getBoundingClientRect().top

返回距页面顶部的距离

您可以使用
window.innerHeight
获取窗口的高度

因此，只需检查每个元素的顶部位置是否大于窗口高度的一半

elem.getBoundingClientRect().top > window.innerHeight/2

如果上述情况属实，那么您可以为元素指定一个类，使其显示在链接标题上方，但老实说，有很多方法可以实现同样的效果

所以，假设你想在标题上方的跨距中添加一个类，你可以做一些事情，比如相对定位它们并添加一个负的
top
css值，或者我要做的是使用css3转换

.above {
  transform: translate(0, -100%);
}

这样，您就不需要猜测跨度的高度，因为css转换使用目标元素的维度，而不是父容器的维度

要记住的另一件事是，为了将脚本负载保持在最低限度，可能需要检查
span
元素在
onhover
事件侦听器中的位置，而不要在DOM准备好时检查所有这些span，因为它们将暂停渲染，直到脚本准备好，并使页面感觉无响应e、 
我假设您希望坚持当前的实现，即
span
元素隐藏，直到鼠标悬停

您可以使用

elem.getBoundingClientRect().top

返回距页面顶部的距离

您可以使用
window.innerHeight
获取窗口的高度

因此，只需检查每个元素的顶部位置是否大于窗口高度的一半

elem.getBoundingClientRect().top > window.innerHeight/2

如果上述情况属实，那么您可以为元素指定一个类，使其显示在链接标题上方，但老实说，有很多方法可以实现同样的效果

所以，假设你想在标题上方的跨距中添加一个类，你可以做一些事情，比如相对定位它们并添加一个负的
top
css值，或者我要做的是使用css3转换

.above {
  transform: translate(0, -100%);
}

这样，您就不需要猜测跨度的高度，因为css转换使用目标元素的维度，而不是父容器的维度

要记住的另一件事是，为了将脚本负载保持在最低限度，可能需要检查
span
元素在
onhover
事件侦听器中的位置，而不要在DOM准备好时检查所有这些span，因为它们将暂停渲染，直到脚本准备好，并使页面感觉无响应e