Question

我有一点问题，我尝试在导航栏中使用jquery创建动画。我的导航栏动画是这样的：http://www.vogue.fr/?international 但我的问题是，只有当我在页面顶部时动画开始。但是当用户向上滚动或从任何地方向下滚动时，我需要动画开始。

我的Jquery代码：

$(document).ready(function () {
 $(window).scroll(function() {
   if ($(document).scrollTop() < 1) {
    $('nav').addClass('navYolo');
    $('nav').removeClass('navYo');
    $( "ul" ).show();
 } else {
    $('nav').removeClass('navYolo');
    $('nav').addClass('navYo');
    $( "ul" ).hide();
    }
  });
});

如果有人可以帮助我。非常感谢！

Answer 1

您可以确定滚动的方向并添加/删除导航的类。

＆＃13;

var lastScrollTop = 0;
$(window).scroll(function(event){
   var currentScroll = $(this).scrollTop();
   if ($(this).scrollTop() > lastScrollTop){
       $('nav').addClass('hidden');
   } else {
      $('nav').removeClass('hidden');
   }
   lastScrollTop = currentScroll;
});

＆＃13;

.wrapper {
  height: 1000px;
  background: red;
}

nav {
  width: 100%;
  height: 50px;
  background: yellow;
  position: fixed;
  top: 0px;
  transition: height 0.3s ease 0s;
  -webkit-transition: height 0.3s ease 0s;
  -moz-transition: height 0.3s ease 0s;
}

nav.hidden {
  height: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav></nav>
</div>

＆＃13;

Answer 2

我已经完成了这个，在这里你可以准确设置你想要定位的滚动值，你甚至可以设置观看设备的宽度，你不想在移动设备上做一些动画。这是代码中最重要的部分，其余部分在链接中。我添加了不透明度更改和转换功能，抱歉没有使用本机JS，它实际上相当简单，但时间很短。

$(document).ready(function(){
var previousScroll = 0;

$(window).scroll(function(){

var currentScroll = $(this).scrollTop();
 var screenWidth = $( window ).width();


if (currentScroll >= 0 && currentScroll < $(document).height() -    $(window).height() && screenWidth > 800){}

链接到codepen

http://codepen.io/damianocel/pen/PZQVOR

jQuery ScrollTop（）函数动画菜单

2 个答案: