Плавное появление меню

$(document).scroll(function() { 
  if ($(document).width() > 785) { 
    if ($(document).scrollTop() > ($('header').height())) { 
      $('.sub-menu').addClass('open'); 
    } else { 
      $('.sub-menu').removeClass('open'); 
    } 
  } 
});

.sub-menu { 
  z-index: 1023; 
  overflow: hidden; 
  height: 0; 
  background: #fff; 
  position: fixed; 
  width: 100%; 
  top: 0; 
  transition: all .4s ease; 
  -webkit-box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.46); 
  -moz-box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.46); 
  box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.46); 
} 
 
.sub-menu.open { 
  height: 60px; 
  display: block; 
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus accusamus saepe dignissimos et eveniet quae maxime expedita dolorem molestias, dolore est vitae sint non reiciendis, sequi perferendis facere corrupti veniam.</header> 
<div class="sub-menu"> 
 
</div> 
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto enim alias quia maxime, nulla pariatur ad eos tempore. Corrupti, temporibus. Assumenda nesciunt unde autem optio itaque sunt magni recusandae temporibus.</p> 
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, quas doloremque rerum minus dolores beatae dolore atque sunt fuga facere impedit cumque, quos eos excepturi adipisci earum voluptates, cupiditate enim.</p> 
<p>Quos earum quisquam at assumenda quod repudiandae rerum, debitis maxime! Odit cupiditate nisi maxime cumque incidunt vel ipsum optio autem, facilis corrupti quod similique error eius nemo, at, est explicabo!</p> 
<p>Facere consequuntur, quo earum, perspiciatis quisquam cum qui ad nam dolorum voluptatibus sunt labore delectus quasi voluptates. Distinctio harum sint perferendis, porro sit ratione. Eos magnam distinctio nihil voluptatibus labore?</p> 
<p>Minima, illum assumenda iusto earum doloremque quasi qui quisquam, repudiandae provident sapiente possimus autem at nihil corrupti ullam? Inventore excepturi facilis consectetur voluptatem adipisci in enim dolorum dolores corporis! Fuga.</p> 
<p>Corrupti incidunt perspiciatis rem veniam possimus libero dolores dolore harum? Reiciendis voluptatem quae architecto autem. Eveniet labore molestias inventore libero aperiam eius reprehenderit pariatur corporis accusantium nam, quidem sapiente quo.</p> 
<p>Alias accusantium delectus laborum nulla facere architecto id explicabo quis reiciendis? Esse mollitia adipisci quasi optio nulla odit distinctio ab dolor itaque soluta quae debitis, labore ducimus reiciendis aspernatur eaque.</p> 
<p>Molestias maiores ducimus, odio magni corrupti assumenda placeat. Repellat voluptatibus excepturi iure beatae ut deserunt expedita enim minus placeat labore, a nemo illo. Hic ea, cum facilis placeat sint omnis!</p> 
<p>Repudiandae aperiam, explicabo ex vitae sequi rerum dolorum repellendus ullam at dicta temporibus in ipsam quae sit consequuntur minima dolorem. Dolorum officiis adipisci expedita obcaecati voluptate quod inventore fugiat non!</p> 
<p>Fugit vel omnis, officia nam commodi, quisquam nobis velit vero ullam illum veritatis delectus expedita cum ipsam placeat sunt pariatur aliquid voluptatem possimus repellendus nihil? Eaque voluptatem architecto expedita hic!</p> 
<p>Maiores libero quod quaerat nulla aperiam, voluptate cum. Totam exercitationem, laborum soluta optio rerum in quia cupiditate nesciunt illum nulla nam. Cum vel maxime ut tempore, repellat quasi quod provident.</p> 
<p>Ratione consequuntur corporis necessitatibus dolorem illum sint dolore expedita, facilis, numquam voluptatibus ab nisi doloremque accusantium rem! Cupiditate unde delectus maiores, natus magnam eligendi repellendus laudantium tempora omnis, vel obcaecati.</p> 
<p>Placeat eligendi nemo magnam. Consectetur error eveniet cupiditate quibusdam saepe. Rem assumenda ullam voluptatum similique provident. Quas ducimus error, et sunt rerum incidunt, neque voluptatibus velit porro dolores non totam.</p> 
<p>Officiis recusandae quod vel saepe possimus corporis dolorem labore quis aperiam ex. Natus quae ex, ullam neque magni reprehenderit suscipit aut nostrum maxime voluptate est magnam, distinctio voluptas accusamus necessitatibus!</p> 
<p>Voluptates officiis explicabo enim ut dolorem aliquid suscipit ratione eveniet amet molestias sed inventore veniam cumque, ipsa consequuntur sit, maiores alias assumenda dolorum! Iste odit officia ex cum tempora facere.</p> 
<p>Unde sint eos illum neque libero, perferendis culpa et illo reprehenderit odio in minus earum reiciendis magnam soluta nostrum repellendus doloribus, impedit error ipsum? Praesentium unde sunt cum hic aspernatur.</p> 
<p>Quas ducimus blanditiis est quaerat facilis unde illum esse itaque tempora soluta eaque, eum aliquid praesentium eveniet voluptatem corporis rem veritatis! Voluptatem debitis quod velit mollitia minus perspiciatis cupiditate est?</p> 
<p>Ducimus itaque magnam odio esse placeat ratione, voluptas nam reprehenderit architecto labore in sed ipsam dicta sequi repellendus illum consectetur ut a voluptatum doloribus quidem! Repudiandae dolor facilis assumenda mollitia.</p> 
<p>Recusandae maxime quisquam iure aliquid atque necessitatibus aspernatur dicta neque adipisci ducimus perferendis sint aliquam tempore numquam explicabo sequi et, voluptates quis laboriosam. Rerum, sequi quisquam doloribus facilis error repudiandae.</p> 
<p>Vitae sed commodi sit hic fugiat aliquam, fugit vero deserunt quidem est! Temporibus fugit minima omnis necessitatibus quidem fuga quas quos consequatur, earum quasi repellendus quod optio totam voluptas repellat.</p> 
<p>Repellendus maiores, quis nemo fuga nam eaque sequi. Consectetur culpa ex at, maiores enim eum hic quo, iste commodi illo error! Dolore quam ratione dicta accusamus, neque tenetur aliquam? Reprehenderit.</p> 
<p>A ut unde optio rerum accusamus, aut perspiciatis, eos nisi, autem explicabo nulla accusantium porro architecto debitis? Cupiditate molestiae excepturi enim veniam alias dignissimos dolores, saepe commodi nobis pariatur non.</p> 
<p>Molestiae ullam, possimus velit cum eveniet ratione asperiores rem cupiditate vero nostrum corrupti ea, voluptates officia provident sit esse quos. Illum natus, eius aspernatur amet similique consequuntur! Animi, magnam laudantium!</p> 
<p>Soluta accusantium velit, ipsa nulla, officiis ipsam optio expedita nostrum, dignissimos et fugit cum. Dolorem voluptatibus error laudantium sunt suscipit dolores modi, soluta et! Officiis, laudantium. Laboriosam dolores maxime nobis!</p> 
<p>Omnis quasi cum repellendus facilis animi, adipisci sequi et. Sit, veritatis. Labore, delectus eius itaque fuga inventore dolores harum, minus doloremque quos doloribus laboriosam facere sint reiciendis deleniti error! Labore?</p> 
<p>Provident corporis minus dolorem, earum neque numquam odit velit tempora ea harum nostrum adipisci non deleniti ut dolorum officiis alias sint unde tenetur nobis iste vitae similique illo inventore. Id.</p>