javascript - 如何让方 block 显示更流畅？

Question

行为:当我向下滚动时， block “head-top”和“desc”不可见。如果我向后滚动一点，这些 block 就会再次出现。我对顶部进行了动画处理，但效果不是很好。这样的布局结构可以动画什么？如何让“head-top”和“desc” block 的显示更流畅？谢谢。

$(function() {
  var component = $('.head');
  var scrollPos = 0;
  var delta = 5;
  var top = $('.main').offset().top;

  function scrollOnMob() {
    var currentScrollPos = $(this).scrollTop();

    if (Math.abs(scrollPos - currentScrollPos) <= delta)
      return;

    if (currentScrollPos > scrollPos) {
      component.removeClass("unpinned");
    } else {
      component.addClass("unpinned");
    }

    scrollPos = currentScrollPos;
  }

  $(window).on('scroll', scrollOnMob);
});

body {
  margin: 0;
  padding: 0;
}

.head {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: -103px;
  background: #fff;
  z-index: 20;
}

.head-top {
  height: 45px;
  background: green;
}

.logo {
  height: 60px;
  background: gray;
}

.desc {
  height: 58px;
  background: purple;
}

.unpinned {
  top: 0;
  transition-property: top;
  transition-duration: .2s;
  will-change: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="head">
  <div class="head-top">
    top info
  </div>
  <div class="head-bottom">
    <div class="desc">desc</div>
    <div class="logo">logo</div>
  </div>
</div>
<div class="main">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita velit fugiat, voluptas sunt eveniet, aperiam odio, quam quaerat quas natus laudantium. Similique, deleniti eveniet incidunt. Fugiat earum perferendis quos ipsum! Magni cumque iure, ab
  velit reprehenderit laudantium odit. Eligendi dolor, sed repudiandae inventore voluptatum reiciendis ratione voluptates similique qui, doloribus quas velit minus voluptatibus voluptas labore incidunt eius ipsum quam libero! Libero voluptates veniam
  porro nulla numquam suscipit. Architecto aperiam quis rerum accusamus temporibus quae, qui molestiae rem a animi quas, hic. Quia, omnis odit, qui harum aliquam impedit esse aut est, repellat fugit, nobis dolorum nulla. Quae iure molestiae voluptatem
  consectetur necessitatibus assumenda maiores, nesciunt culpa voluptas ab nam nihil dolores distinctio reprehenderit error libero. Quo harum suscipit, ratione explicabo et voluptatem veritatis cum, numquam fugit provident exercitationem illum. Dolorum
  quidem molestias iste adipisci eligendi, a sunt, eum nobis. Atque et tempora eum beatae libero error deserunt dolorem placeat architecto earum quia, excepturi qui, vitae officia labore cupiditate voluptatem doloribus, veniam molestiae inventore corporis
  tempore sed. Voluptates laudantium quae unde ab quia voluptate quaerat iure eos laboriosam totam temporibus soluta provident sed, possimus rerum est nisi! Dicta libero pariatur exercitationem, modi. Maiores molestias consequatur tenetur molestiae ad
  officia vel dolorum laborum expedita, deleniti voluptatem enim dicta suscipit itaque, inventore quos voluptas. Quaerat optio quae voluptates quibusdam rerum eum omnis iusto porro perspiciatis neque doloribus, reprehenderit itaque delectus quod minima,
  officia enim voluptatibus aspernatur consectetur repellat officiis laboriosam a! Omnis, earum, dolores? Officiis sit architecto quae tenetur quisquam placeat voluptates hic! Pariatur aspernatur sequi eveniet dicta quis nam modi neque error autem asperiores
  illo sed quas, nesciunt deleniti, corporis ipsam fuga quia odio laudantium quidem blanditiis vitae repellat omnis, reiciendis. Obcaecati veniam dolor, culpa omnis, ipsum sunt ipsa nostrum itaque. Culpa expedita, excepturi tenetur cum esse sit deserunt
  atque beatae fugiat nobis sapiente rem, molestias porro enim. Eius molestias repellendus corporis, optio esse. Voluptatum tenetur libero numquam possimus ducimus odio neque sint velit cumque, sunt distinctio ad impedit omnis blanditiis est alias tempore
  repudiandae vero in corrupti dolorem placeat iusto, earum aperiam? Aliquid corrupti minus architecto vero dolore qui, ut ducimus nihil necessitatibus recusandae, quibusdam voluptate, blanditiis repellendus ex a molestiae accusantium itaque. Non inventore
  velit sapiente debitis, hic voluptate quisquam laudantium vel odio perspiciatis ex ab dignissimos earum aliquam praesentium neque cupiditate dolores repellendus dolor voluptatum recusandae ipsam, rerum et. Autem ab dolor vero ipsa quasi nobis dicta
  sequi sit, fuga quaerat suscipit provident labore quisquam numquam possimus porro cum amet blanditiis impedit, reprehenderit temporibus dolores. Quisquam velit dignissimos molestias similique asperiores sunt, perspiciatis error consequuntur, quas modi
  aliquid eius culpa numquam ab qui cum voluptate itaque sed molestiae officia. Magnam fugit officia dolorem accusamus obcaecati animi, maiores quam? Illum ea, molestias eaque corporis ratione iusto illo, officiis libero laudantium, fugit ex? Porro itaque
  veritatis labore maiores. Molestias dolore in quod cumque similique quibusdam deleniti eligendi ea odio omnis. Praesentium doloribus suscipit libero, delectus perspiciatis vel nostrum debitis, iure magnam sapiente quae nulla unde ea, dolor eligendi
  vero ut numquam laboriosam vitae placeat! Quia odio perspiciatis reiciendis consequatur animi atque delectus molestiae iste sed cum minima incidunt, odit esse, quidem eum. Sint eveniet tenetur tempora amet quas molestiae ut, aspernatur animi. Ea totam
  sit repudiandae delectus aut odio ipsum dolorem quod illo earum nesciunt, quo sequi ducimus quisquam praesentium dicta molestias hic, odit fugit. Ex libero in, provident, maiores architecto nulla magnam mollitia nostrum, necessitatibus repudiandae doloribus
  praesentium fuga vero repellendus a nam quidem corporis ullam? Architecto, id itaque non et labore voluptatum dicta ad, optio, consectetur, facere magni hic quia. Dolorum, dolore recusandae saepe officiis id voluptatibus earum.
</div>

Like so that

Answer 1

只需更改您的 CSS 即可

.head {
    top: 0px;
}

所以滚动条会从您的头顶开始显示。