显示无与Flex jQuery之间的平稳过渡

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 中的我的#menu ID中添加transition: 1s;。没有修复它。

#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

我尚未测试，但是您尝试'标志'使（文档）.croll运行一次。因为您的代码，case y = 700，然后做$（文档）.scroll运行，case y = 701，case 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();
  }
}