Question

我正在创建一个小菜单，其中包含 HTML ， CSS 和 Javascript ，我希望它在淡入淡出用户在标题下滚动。在我尝试改进网站设计的响应部分之前，这一点非常顺利。

我将菜单从display: block;更改为display: flex;，因为屏幕尺寸可以更改，我希望菜单的所有行始终填充整个菜单。我只是在 .js 脚本中更改了我的代码，如下所示：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600) {
	$('#menu').css('display','flex');
  } else {
	$('#menu').css('display','none');
  }
}

问题在于转型不再平稳。我使用jQuery中的fadeIn()和fadeOut()方法与display: block;一起使用，但我对直接 .css 方法没有相同的淡入淡出效果。

我已经尝试过这些东西了：

在 CSS 中的transition: 1s; ID中添加#menu。 没有解决。

#menu {
  z-index : 3;
  position : fixed;
  display: none;
  flex-direction : column;
  justify-content : space-around;
  width : 15%;
  height : 50%;
  right : 1.5%;
  top : 20%;
  font-size : 24px;
  transition : 3s;
}

保留.fadeIn()和.fadeOut()方法，并在其后添加.css更改。 没有修复。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600) {
    $('#menu').fadeIn();
    $('#menu').css('display','flex');
  } else {
    $('#menu').fadeOut();
  }
}

我不知道还能尝试什么。我搜索了各种解决方案，但大多数都在讨论.css方法本身，而不是我正在寻找的褪色效果。

Answer 1

我没有经过测试，但你试着举报＃39;使（文档）.scroll运行一次。因为你的代码，案例y = 700然后做$（文件）.scroll运行，案例y = 701，案例y = 702 ???

var flag=false;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600 && flag==false) {
    $('#menu').fadeIn();
    $('#menu').css('display','flex');
     flag=true;
  } else if(y<=600 && flag==true) {
     flag=false;
    $('#menu').fadeOut();
  }
}

display none和flex jQuery之间的平滑过渡

1 个答案: