jquery - 滚动时导航变小

Question

<分区>

Answer 1

这是一个例子。您需要在滚动到特定高度时应用一个类，而在 CSS 中，您必须在添加该类时缩小它。

$(document).scroll(function() {
  if ($(document).scrollTop() > 100) {
    $('.header').addClass('shrinkIt');
  } else {
    $('.header').removeClass('shrinkIt');
  }
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 50px 100px;
  transition: all .3s ease;
  font-size: 22px;
}
.header.shrinkIt {
  padding: 20px 100px;
  font-size: 16px;
}
.content {
  background: #2b2b99;
  height: 1400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    I will shrink.
  </div>

  <div class="content">



  </div>
</div>