Question

我正在开发一个项目，需要在2种情况下将全长徽标缩小到最初的缩写： A）当页面向下滚动超过300px时。和 B）如果页面没有滚动超过300px（意味着仍然显示全长徽标），则将鼠标悬停在顶部菜单项上时，将全长徽标缩小为初始值以适应下拉菜单。

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

/* shrink logo when page scroll past 300px by adding .smaller class to #logo. */

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        document.getElementById("logo").className = "smaller";
    } else {
        document.getElementById("logo").className = "";
    }
}	

/* shrink logo when mouse over top menu items (.showlp) only if page has NOT scroll past 300px */

$(document).ready(function(){
    $(".showlp").mouseover(function(){
		if (document.body.scrollTop < 300 || document.documentElement.scrollTop < 300) {
        	document.getElementById("logo").className = "smaller";
			}
     })
	 $(".showlp").mouseout(function(){
			if (document.body.scrollTop < 300 || document.documentElement.scrollTop < 300) {
        	document.getElementById("logo").className = "";
			}
     })
	
});

感谢任何帮助。

Answer 1

通过body标签中的data属性传递参数，并通过javascript代码访问该值。例如。

然后在你的javascript上

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

然后在你的窗口滚动功能上将属性值设置为1，并在你的鼠标上听取它的功能，知道什么时候到添加功能。例如。功能 MyFunction的（）{ 如果（document.bo dy.scrollTop→3 00）{ //交换urclass // 然后做 $（＆＃34;主体＆＃34）。ATTR（＆＃34; data-var＆＃34;，1）; }

然后将鼠标悬停在功能上：

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

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

1 个答案: