Sticky Bar With CSS Popup Animation

I was tasked with making a Google Adwords landing page for our company. Our designer Alex Benson decided he wanted a contact form to stick to the bottom of the page and popup when you click it.

See the Pen Sticky contact bar with popup animation by Josh Fabean (@fabean) on CodePen.

You can poke around the code yourself but I'll break down the main thing I did to accomplish this.

First there is the easy part, I did a couple CSS animations.

.fadeout {
  opacity: 0;
  transition: opacity 1s ease;
}
.fadein {
  opacity: 1;
  transition: opacity 1s ease;
}
.contact {
  position: fixed;
  bottom: 0;
  margin-bottom: 0;
  padding: 10px 0;
  width: 100%;
  height: auto;
  transition: all 400ms cubic-bezier(0, 0, 0.32, 1.50);
}

I was able to do that crazy transition simply by playing with the new Chrome Dev tools easy popup thingy.

After getting the CSS out of the way all that was left was to adjust the height of that bar based on the content we need to show and the CSS animation should do the rest.

Here's the js, cut up to only show the important part

// get all our elements we're going to be playing with.
var contact = document.getElementById('sticky-contact');
var formEl = document.getElementsByClassName('with-form')[0];
var getStarted = document.getElementById('get-started');

// when you click the first button do this thing!
getStarted.addEventListener('click', function(){
  var initHeight = contact.scrollHeight; // quick grab the current height
  contact.style.height = initHeight + 'px'; // set that height on the element
  formEl.classList.remove('hide'); // show the next step
  var withForm = formEl.scrollHeight; // find what new height would be
  contact.style.height = (withForm + 20) + 'px'; // set that height on the element
  document.getElementsByClassName('initial')[0].classList.add('hide'); // hide the first section of the bar
}, false);

If reading that code isn't enough here is the written out version.

When you click the 'Get Started' button we first grab the current height of the sticky bar. We take that height and set that as the height of the element instead of just height: auto;. Take the part that will show next and remove the class of hide so now it's visible. Grab the height of that element, now reset the height of the sticky bar to the height of the next step. Finally we take the first step that we just clicked and hide that.

Doing that allows for the CSS animation to take over and animate the height giving us the cool effect.

Overall nothing crazy complicated here just a bunch of simple things put together to make a good end result.