动画高度变化

Question

以下代码使我的导航栏在滚动时变小，滚动到顶部时更大：原始高度 15vh 且smallnav高度 8vh

$(document).ready(function($){
    var nav = $('nav');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 13.35) {
            nav.addClass("smallnav");
        } else if($(this).scrollTop() > 0) {
            nav.removeClass("smallnav");
        }
    });
});

现在它只是从小到大或者反过来但是如何为此创建动画以使其缩小或扩展？

Answer 1

您可以添加以下内容以更好地改变高度：

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

<强>演示

$(document).ready(function($) {
  var nav = $('nav');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 13.35) {
      nav.addClass("smallnav");
    } else if ($(this).scrollTop() >= 0) {
      nav.removeClass("smallnav");
    }
  });
});

nav {
  height: 15vh;
  border: 1px solid black;
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.smallnav {
  height: 8vh;
}

body {
  height: 200vh
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>your nav </nav>

Answer 2

在Foreach css

中使用此功能

nav

它会使高度变化超过1秒。

详细了解此here。