如何使块显示更流畅？

Question

Behavior: when I scroll down, the blocks "head-top" and "desc" are not visible. If I scroll back a little, then again these blocks appear. I animated the top, but it doesn't work quite smoothly. What can be animated with such a layout structure? How to make the showing of the "head-top" and "desc" blocks smoother? Thank you.

 $(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

Just change in your CSS like

.head {
    top: 0px;
}

so the scrollbar starts from your head-top and it would be showing.