Compact header of the site, how to return to its previous form?

Question

css

There is a header:
<div class="head"></div>

.head {
  top: 0;
  width: 100%;
  height: 200px;
  background: blue;
  position: fixed;
}

When scrolling, it decreases:

$(document).ready(function() {
  $(window).scroll(function() {
    $('.head').animate({
    height: "100px",
  }, 500);
  });
});

Full code
How to make something when scrolling the page to the very top, it would return to the previous view?

Answer 1

Design in js is bad manners. Similar things are done by adding/removing classes with the desired properties.

$(window).scroll(function() {
    var top = $(window).scrollTop();  
    if(top>0){
        $('.header').addClass('header--min');
    } else {
        $('.header').removeClass('header--min');
    }
});

Define .header--min{}state changes as a class.