EZmWEm

ezmwem.markdown

EZmWEm

A Pen by wunnle on CodePen.

License.

index.html

<h2>This is a headline</h2>
<p>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta atque distinctio tenetur maiores, labore delectus possimus, odio quidem numquam dolorum eos voluptatibus veritatis facilis incidunt, commodi eum quas cupiditate in.</span>
  <span>Eligendi illum magni praesentium veniam error sunt ratione voluptas ut fugit, provident dolorum voluptatum atque excepturi adipisci deleniti nam quam saepe quis commodi natus. Assumenda delectus facere ex aut voluptas!</span>
  <span>Dolorem, doloribus, officia. Numquam deleniti enim nesciunt quisquam consectetur unde nisi tenetur vel obcaecati, accusamus hic autem id minus inventore quasi blanditiis ipsam, ducimus quia delectus? Voluptas, nobis beatae at.</span>
  <span>Fugit impedit asperiores fuga quod incidunt velit id, quis ab nobis, cumque dolor atque magnam eos ut voluptatem tenetur tempora temporibus perferendis fugiat sed similique placeat, beatae. Iure, enim, fuga.</span>
  <span>Alias autem, sequi aspernatur odio, iste ad recusandae non accusamus rerum esse libero quidem id ipsa. Delectus voluptate, non adipisci inventore possimus iure nostrum vitae expedita aperiam nihil accusamus consequatur?</span>
</p>
<p>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem dicta porro in quis, voluptas eaque quisquam velit accusamus. Nam repellat molestiae rem exercitationem iusto omnis nostrum. Aliquam consequatur fugiat tempore.</span>
  <span>Quia at neque fuga saepe quam consequuntur adipisci eaque. Dolorem molestias doloremque aliquid laborum, nostrum corporis amet quam est, repellat modi autem dicta! Exercitationem veritatis harum nihil officia iure, odit.</span>
  <span>Sit saepe provident nisi fugit quia magnam accusantium facilis, consequuntur itaque, suscipit, quaerat libero dolorum aliquid repellendus nam ab hic soluta consectetur eligendi magni asperiores. Animi mollitia, similique quisquam fuga.</span>
  <span>Possimus sequi ratione inventore laudantium delectus iusto consequatur aliquid labore eum quibusdam maiores odio nobis, optio in velit assumenda suscipit aut. Necessitatibus dolor error dignissimos rerum porro quo labore quibusdam.</span>
  <span>Architecto incidunt fuga voluptas ad delectus. Eos, obcaecati, perspiciatis. Blanditiis fugit consectetur eum eveniet debitis, molestiae necessitatibus repellendus nemo voluptates dignissimos temporibus at excepturi, recusandae quaerat veniam quisquam corrupti illo!</span>
  <span>Placeat consequatur dolorem eos. Inventore, commodi quidem illum. Libero ex soluta voluptas quisquam non aliquam ratione, mollitia, animi ipsum! Ut delectus voluptas repellendus fugiat harum. Sit id eum iure et?</span>
  <span>Et commodi dignissimos nobis eos. Autem perspiciatis repellendus, ut excepturi placeat ipsum mollitia eum, obcaecati quasi cum eveniet, officiis sint nostrum modi ullam magni sunt quis quos? Vero, corporis accusamus.</span>
  <span>Quaerat tempore molestias veritatis amet, numquam dolorem, excepturi modi quia provident culpa corporis, dolore enim, voluptatibus voluptatem itaque exercitationem? Earum tempora, nihil officia minima maxime. Voluptates voluptate molestiae, accusamus saepe.</span>
  <span>Eum, perspiciatis magni quia, asperiores deserunt laudantium. Nihil laudantium nisi quam nobis sint! Iusto reprehenderit tempora perspiciatis tenetur quae voluptate harum dolor facilis, totam numquam adipisci ipsam facere, dignissimos non!</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum, perferendis id nulla minus tempore quam explicabo consequatur sit enim placeat quisquam nobis, adipisci praesentium recusandae iusto quas similique quidem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum, perferendis id nulla minus tempore quam explicabo consequatur sit enim placeat quisquam nobis, adipisci praesentium recusandae iusto quas similique quidem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum, perferendis id nulla minus tempore quam explicabo consequatur sit enim placeat quisquam nobis, adipisci praesentium recusandae iusto quas similique quidem!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat eum, perferendis id nulla minus tempore quam explicabo consequatur sit enim placeat quisquam nobis, adipisci praesentium recusandae iusto quas similique quidem!</p>

<nav class="fixed-bar">
  <div class="handle">I'm a handle</div>
  <div class="rest-of-fixed-nav">
    <i class="close">&#10006;</i>
    <h3>This is the rest of fixed bar</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut facilis ex ipsam minus, asperiores, enim a. Illo tempora, corporis exercitationem veritatis quisquam dicta iusto. Repudiandae maxime dicta cupiditate recusandae eos.</p>
    </nav>

script.js

$(".handle, i.close").click(function() {
  $(".fixed-bar").toggleClass("open");
  if ($(".fixed-bar").hasClass("open")) {
    var overlay = $('<div />').appendTo('body');
    overlay.attr('class', 'overlay overlay-on');
  } else {
    $(".overlay").removeClass("overlay-on").fadeOut().delay(3000).remove();
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

body {
  font-family: "Roboto", sans-serif;
  background: #dbdbdb;
  padding: 15px;
}

.fixed-bar {
  position: fixed;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
}

.fixed-bar:hover {
  will-change: transform;
}

.overlay {
  background: lightgrey;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
}

.fixed-bar.open {
  transform: translateY(0);
  z-index: 101;
}

.fixed-bar .handle {
  display: inline-block;
  padding: 5px 10px 6px;
  color: white;
  font-size: 16px;
  background: black;
  border-radius: 3px;
  transform: translate(-30px, -30px);
  cursor: pointer;
}

.rest-of-the-fixed-bar {
  position: relative;
}

i.close {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
}