Question

我想创建一个水平导航，使其在滚动时动画化为垂直导航。

我尝试使用动画来做到这一点，但是在那里我只能像在xxx秒内滚动50 px动画后那样提供动画。

$(window).scroll(function() {
if (ScrolledFromTop > 50) {
    $('nav').animate({CSS CHANGES});
}
});

但是我想这样做，就像从滚动50px开始，并且动画应该在滚动100px时完成。有任何想法吗？谢谢

Answer 1

您能澄清更多吗？我认为您需要类似滑动的功能，但是这次作为鼠标事件处理程序？

Answer 2

这背后的用例是什么？当用户停止在50到100像素之间滚动时，似乎在某个过渡之间卡住了菜单是不切实际的。

无论如何，您都需要将当前的滚动像素值映射到动画，就像这样：

$(window).scroll(function() {
  if (window.pageYOffset  >= 50 && window.pageYOffset  <= 100) {
      var percent = (window.pageYOffset - 50 ) * 2;
      animateMenu(percent);
  }else if(window.pageYOffset < 50) {
  	  animateMenu(0);
  }else if(window.pageYOffset > 100) {
      animateMenu(100);
  }
});

function animateMenu(percent){
   $('.menu').css({
      width: 100 - percent + "%",
      height: percent + "%"
   });
}

.menu{
  background: red;
  height: 50px;
  width: 100%;
  min-width: 50px;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.2s all ease-in;
  min-height: 50px;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

通过滚动动画导航

2 个答案: