jQuery ScrollTop（）函数动画菜单-Java 学习之路

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

我的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();
    }
  });
});

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

2 回答

0
我已经完成了这个，在这里你可以精确设置你想要定位的滚动值，你甚至可以设置观看设备的宽度，一些动画你不想在移动f.e.上做 . 这是代码中最重要的部分，其余部分在链接中 . 我添加了不透明度更改和转换功能，抱歉没有使用本机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
回复于 2024-04-28T18:51:41+08:00

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

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

.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;
}

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

回复于 2024-04-28T18:51:41+08:00

jQuery ScrollTop（）函数动画菜单

2 回答

相关问题