Sticky Signup Bar

By Tim Hartwick

F6
#
forms sticky signup callout blog email
How do I use This?

A sticky callout that starts fixed positioned and moves into the page when user scrolls to correct spot.

HTML
<div class="row column" id="subscription-container">
  <div class="subscription-footer" id="email-subscription-footer">
    <div class="subscription-wrapper">
      <p class="subscription-description">Get design articles delivered to your inbox!</p>
      <div class="subscription-form-wrapper">
        <form class="subscription-form">
          <div class="row collapse">
            <div class="small-7 columns">
              <input class="input-text subscription-input" placeholder="getupdates@example.com" size="21" type="text">
            </div>
            <div class="small-5 columns">
              <button class="button">Get Updates</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


$subscription-footer-height: 50px;

.subscription-footer {
  background: $white;
  border-bottom: 1px solid $light-gray;
  border-top: 1px solid $light-gray;
  bottom: 0;
  display: block;
  height: $subscription-footer-height;
  left: 0;
  padding: 15px 10px $subscription-footer-height;
  position: fixed;
  width: 100%;
  z-index: 100;

  &.is-in-page {
    margin-bottom: 1rem;
    position: relative;
  }
}

.subscription-description,
.subscription-form {
  position: absolute;
}

.subscription-description {
  bottom: 0;
  color: $medium-gray;
  font-size: 0.9rem;
  left: 0;
  top: 6px;
}

.subscription-form {
  max-width: 550px;
  min-width: 320px;
  right: 10px;
  width: 50%;
}

.subscription-wrapper {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}



.subscription-footer {
  background: #fefefe;
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  bottom: 0;
  display: block;
  height: 50px;
  left: 0;
  padding: 15px 10px 50px;
  position: fixed;
  width: 100%;
  z-index: 100;
}

.subscription-footer.is-in-page {
  margin-bottom: 1rem;
  position: relative;
}

.subscription-description,
.subscription-form {
  position: absolute;
}

.subscription-description {
  bottom: 0;
  color: #cacaca;
  font-size: 0.9rem;
  left: 0;
  top: 6px;
}

.subscription-form {
  max-width: 550px;
  min-width: 320px;
  right: 10px;
  width: 50%;
}

.subscription-wrapper {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}
JS
(function() {
  var $container = $('#subscription-container');
  var $window = $(window);
  var $footer = $('#email-subscription-footer');
  $(window).on("load scroll", function() {
    var footerOffset = $container.offset().top;
    var myScrollPosition = $window.scrollTop();
    var windowHeight = $window.height();
    var footerHeight = $footer.outerHeight();

    if ((myScrollPosition + windowHeight - footerHeight) > footerOffset) {
      $footer.addClass('is-in-page');
    } else {
      $footer.removeClass('is-in-page');
    }
  });
})();

Similar Building Blocks

forms

Registration Form

F6
by Rafi
forms

Translucent Form Overlay

F6
by Kevin
forms

Mobile App Message Bar

F6
by Rafi