<div id="head">
  <button id="button">show/hide</button>
</div>

<div id="wrap">
  <div class="center">
    <div class="section">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolore impedit architecto excepturi minima nihil sequi rerum, similique doloribus deleniti vero eligendi quae maiores quod vitae ipsa, atque doloremque perspiciatis ratione voluptatum.</p>
      <p>Nostrum sit ut impedit iusto recusandae. Repellendus blanditiis nulla eaque inventore beatae facilis sequi dolore temporibus fuga dolores laborum asperiores alias nesciunt unde, excepturi reprehenderit accusantium repellat, debitis qui. Labore repellendus, minus!</p>
      <p>Inventore sed consequatur, unde sapiente quam, voluptates at suscipit quisquam, ipsam tenetur sit nulla iure fuga consectetur accusamus? Repellat inventore amet sed consequuntur. Sapiente iusto, animi quis nihil dolor ducimus veniam cumque.</p>
      <p>Neque consequuntur dicta maiores, expedita minima ab. Dicta dolores perferendis, laboriosam explicabo cumque reprehenderit atque odit ullam earum assumenda reiciendis fugit accusamus nesciunt aperiam ipsum distinctio. Maxime accusantium at adipisci ad, repudiandae.</p>
      <p>Id soluta rerum unde ratione quisquam, eaque magni ea voluptate iste reprehenderit, deserunt enim repudiandae nesciunt debitis maiores accusamus quae, ullam repellendus possimus quas. Eum quae aspernatur nihil dolore ab sint consequatur?</p>
      <p>Eos qui, nisi ipsa. Aut aspernatur repudiandae qui illo sunt commodi, hic accusamus deleniti odio culpa doloribus incidunt, omnis, quam modi veniam. Assumenda quisquam dignissimos magnam quo libero animi ratione doloribus, dolorem.</p>
      <p>Repellendus distinctio accusamus ipsa ratione quo rerum explicabo odit quidem nostrum nihil tempore laborum quasi, maiores similique. Porro explicabo consequatur cum incidunt? Ad ullam, ea doloribus illo cupiditate, quam placeat voluptatum vel!</p>
      <p>Numquam quis, modi maxime alias ab eaque ipsa obcaecati, esse temporibus optio harum, aut debitis quo accusantium quisquam nisi iure culpa at, similique adipisci commodi ducimus fuga omnis rem! Ipsa, numquam. Animi.</p>
      <p>Dolor porro voluptatem sunt doloribus, provident, reiciendis deserunt dicta cumque atque. Rerum optio perspiciatis tenetur vitae pariatur adipisci, debitis quidem quisquam, at nulla illum molestiae itaque praesentium quibusdam. Aliquam, sunt officiis nisi.</p>
      <p>Odio consectetur laudantium praesentium corrupti, quia quas, perspiciatis omnis ad dolores quasi quaerat beatae assumenda odit iusto labore repudiandae consequuntur cumque. Deleniti minima quasi amet eligendi distinctio optio porro at culpa eos.</p>
      <p>Consequatur repudiandae libero adipisci excepturi officiis blanditiis, ducimus explicabo nam dicta inventore nemo labore, quis culpa, odit tenetur pariatur cumque ipsam molestias ratione. Ullam libero unde, est odio nihil impedit veniam maiores.</p>
      <p>Eius natus debitis rerum quo, aliquid suscipit hic impedit? Quam aut delectus porro! Eius quod tenetur nostrum minus. Nam in modi dicta, quidem quasi illo repudiandae, sint! Ducimus excepturi voluptate iste repudiandae.</p>
      <p>Deleniti dolor vel blanditiis numquam quod, cupiditate quaerat harum laudantium modi minus nemo reprehenderit saepe incidunt nam dolorum illum necessitatibus possimus eaque neque. Aspernatur nesciunt suscipit ducimus cum ab, rerum, similique laborum.</p>
      <p>Molestias, ipsum eveniet nam nulla hic perferendis minus quo sunt fugiat, soluta repellat omnis aperiam quas debitis laboriosam accusamus dolor et impedit. Molestias, alias. Harum laborum eligendi, dolor modi libero iusto quam.</p>
      <p>Voluptate, nesciunt vel deserunt illum consectetur! Natus, delectus nisi! Perspiciatis saepe, mollitia debitis accusantium, laudantium doloribus rem pariatur cum amet, illo inventore sunt recusandae fuga explicabo, exercitationem libero accusamus! Ullam, harum, officia.</p>
      <p>Eligendi sequi eos ipsa enim velit distinctio asperiores delectus dolore cupiditate minus sit nisi perferendis obcaecati similique ipsum optio natus, magni animi cum ex aut suscipit totam. Numquam quibusdam incidunt neque et.</p>
      <p>Ad repudiandae nulla aspernatur reiciendis soluta dolorem mollitia quo veniam, dolores velit eius, dolore sint consequuntur illum laudantium voluptatum aut dolorum provident, sit incidunt accusantium! Esse natus similique iusto ad laborum tenetur.</p>
      <p>Id laboriosam optio nemo cum itaque accusamus, deleniti commodi iure voluptate labore asperiores natus eius, rerum reiciendis cumque incidunt, vel magni porro. Numquam iste deserunt architecto, nihil inventore quis atque perspiciatis quo.</p>
      <p>Quae impedit, perferendis ullam ea quaerat voluptatum eligendi. Nihil dolorum distinctio quas, dolor magni. Perspiciatis tempore est quam hic minus nam earum ab assumenda laboriosam aliquam vero doloremque facere porro, dolorum quae.</p>
      <p>Itaque voluptas porro totam beatae. Fuga ex eaque corrupti, veritatis explicabo obcaecati dolorum impedit consequuntur totam enim, excepturi nobis harum, odio ducimus at, cum amet cupiditate. Eaque ipsam nulla quae cupiditate eveniet!</p>
      <p>Laborum alias obcaecati dignissimos, ipsum sit ratione dolores at, voluptatem, minus incidunt aliquid similique dicta excepturi, harum dolore explicabo? A rerum aspernatur, minus pariatur tempore nam, deleniti iste voluptatem dignissimos quasi. Obcaecati.</p>
      <p>Praesentium impedit id, corporis minima rerum! Tempore omnis, tempora delectus aperiam a odit asperiores, facilis placeat cumque, sint iure? Tenetur beatae, sunt eum temporibus minus, eos impedit quod veritatis soluta enim qui.</p>

    </div>
  </div>
</div>

// autoprefixer: true

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
  padding-top: 60px;
  transition: padding-top .3s ease;
}

.section {
  padding: 40px;
}

.center {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

#head {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  height: 60px;
  background: #8ae59b;
  transition: transform .3s ease;
}

#button {
  position: absolute;
  right: 0;
  top: 100%;
  width: 100px;
  height: 30px;
  cursor: pointer;
  text-align: center;
}

body {
  &.hide-head {
    #wrap {
      padding-top: 0;
    }

    #head {
      transform: translateY(-60px);
    }
  }
}

$(function() {
  var $body = $('body'),
    $butn = $('#button');
  
  $butn.click(function() {
    $body.toggleClass('hide-head');
  });
});