Javascript 鼠标悬停在特定窗口y范围内的事件

我正在从事一个项目，该项目要求在两种情况下将全长徽标收缩为短首字母： A） 当页面向下滚动超过300px时。 及 B） 如果页面未滚动超过300px（表示全长徽标仍显示），则将全长徽标收缩为初始值，以适应鼠标悬停在顶部菜单项上时的下拉菜单

以下是我尝试的代码： 它正在工作，但当页面滚动超过300px时，鼠标不应移出。它应该保持徽标为较小的初始格式。现在，无论页面是否滚动超过300px，都将发生鼠标移出

/*当页面滚动超过300px时，通过向#logo添加.较小的类来收缩logo*/
window.onscroll=function（）{myFunction（）}；
函数myFunction（）{
if（document.body.scrollTop>300 | | document.documentElement.scrollTop>300）{
document.getElementById（“logo”）.className=“更小”；
}否则{
document.getElementById（“徽标”）.className=“”；
}
}	
/*仅当页面未滚动超过300px时，将鼠标悬停在顶部菜单项（.showlp）上时收缩徽标*/
$（文档）.ready（函数（）{
$（“.showlp”）.mouseover（函数（）{
if（document.body.scrollTop<300 | | document.documentElement.scrollTop<300）{
document.getElementById（“logo”）.className=“更小”；
}
})
$（“.showlp”）.mouseout（函数（）{
if（document.body.scrollTop<300 | | document.documentElement.scrollTop<300）{
document.getElementById（“徽标”）.className=“”；
}
})
});通过body标记中的data属性传递参数，并通过javascript代码访问该值。
如。

然后在javascript上

  var ctrl=
  $("body").attr("
  data-var");

然后，在窗口滚动功能中将属性值设置为1，A，并在鼠标悬停功能上收听该属性值，以了解何时执行
添加功能。
如。
作用
myfunction（）{
如果（document.bo
dy.scrollTop>3
00){
//交换海胆
//那就做吧
$（“正文”）.attr（“
数据变量”，1）；
}

然后在鼠标悬停功能上执行以下操作：

   $(document).re
   ady(function(){
 $(".showIp").mo
  usover(functio
  n(){
  var ctrl=
  $("body").attr("
  data-var");
  if(ctrl==1){
  //swap class
  }
 else{
 //keep swap
  }
  });
  });

谢谢。我尝试将您的代码添加到我的测试页面，但它仍然不起作用。很抱歉，我对javascript了解不多，所以我可能无法使您的代码正常工作。您对html了解那么多吗？然后您可以使用javascript更改数据变量属性的值，并在您的操作事件中收听它。我仍然无法使其正常工作。Inst在引入新元素之前，是否可以使用检查类“.small”是否存在于#logo？并且仅当#logo没有时才在事件上应用鼠标。small？我尝试了这个方法，但仍然不起作用。$（document）。ready（function（）{$（“.showlp”）。mousover（function（）{if（$（“#logo”）。NOT（.small”）{document.getElementById（“logo”）.className=“更小”}else{document.getElementById（“logo”）.className=“；}}}}）；我修复了我的旧代码，现在它在某种程度上正常工作，尽管它仍然有一些bug，比如页面滚动超过300px时mouseout事件不应该工作。