Question

我正在尝试做菜单。当用户向下滚动菜单消失时，向上滚动时再次出现。我有添加动画效果的问题。我不希望菜单立即消失，但需要一些时间。我尝试使用动画功能，但它不起作用。

感谢。

<body>
  <nav class="site-navbar">
  </nav>
</body>

body {
  height:300vh;
  width:100%;
  background-color:yellow;
  margin:0;
  padding:0;
    .site-navbar {
      width:100%;
      height:40px;
      background-color:red;
      position:fixed;
      top:0px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease

  }
    .nav-up {
      top:-40px;
    }
}


        var prevScroll = 0;
                $(document).scroll(function() {
            var currentPos = $(this).scrollTop(); 
            if(currentPos > prevScroll) {
               $('nav').removeClass('site-navbar').addClass('nav-up');
  }
            else {
                $('nav').removeClass('nav-up').addClass('site-navbar');
            }

            prevScroll = currentPos;

        })

https://jsfiddle.net/m6r8z8wp/2/

Answer 1

在添加新的FIDDLE

之前无需删除课程

var prevScroll = 0;
$(document).scroll(function() {
    var currentPos = $(this).scrollTop(); 
    if(currentPos > prevScroll) {
    $('nav').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('site-navbar');
    }
    prevScroll = currentPos;
});

如果您删除该课程，则也会删除过渡

Answer 2

<强>样本

＆＃13;

var prevScroll = 0;
$(document).scroll(function() {
    var currentPos = $(this).scrollTop();
    if (currentPos > prevScroll) {
        $('nav').slideUp("slow", "linear");
    } else {
        $('nav').slideDown("slow", "linear");
    }

    prevScroll = currentPos;

})

＆＃13;

body {
    height: 300vh;
    width: 100%;
    background-color: yellow;
    margin: 0;
    padding: 0;
}
.site-navbar {
    width: 100%;
    height: 40px;
    background-color: red;
    position: fixed;
    top: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="site-navbar">

</nav>

＆＃13;

备选方案，您可以将jquery slideUp() / slideDown()用于动画

如何在JQuery中为addClass / removeclass设置动画

2 个答案: