Floating Form Or Menu

On Page Scroll Floating Form

floatingform

*: for easing effect you need jquery easing
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

Detail:

  • data-skipheader: if you want to show form after user scroll header or banner section add class name here
  • data-easing: add easing name here to implement easing effect *

<ul class="floatingSection">
	<li>
    <span>&lt; Call</span>
<div>
      <a href="tel:+123456789">+123 456 789</a></div></li>
	<li>
    <span>&lt; Chat </span>
<div>
      <a href=";">Live Chat</a></div></li>
	<li class="onclick">
    <span>&lt; Form </span>
<div>
      
<div class="form-group">
          First Name
          </div>
<div class="form-group">
          Email address
          </div>
<div class="form-group">
          Message
          </div>
<div class="checkbox">
          
             All Done
          </div>
Send
      </div></li>
</ul>
<div class="overlay"></div>

add code in css

.overlay { width: 100%; height: 100%; position: fixed; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQImWNguAkAANwA2ohRxm8AAAAASUVORK5CYII=) repeat; top: 0; left: 0; z-index: 998; display: none; cursor: pointer; }
.floatingSection { list-style: none; position: fixed; right: 0; top: 15%; z-index: 999; display: none; }
.floatingSection li { position: relative; background: #dcdcdc; margin-bottom: 10px; }
.floatingSection li > span { padding: 15px; font-size: 14px; cursor: pointer; display: block; background: green; color: #ffffff; border-radius: 4px 0 0 4px; text-align: center; position: absolute; width: 80px; }
.floatingSection li > div { background: #e8e7e7; padding: 17px 17px 16px; }
.floatingSection li { width: 150px; }
.floatingSection li+li { width: 180px; }
.floatingSection li+li+li { width: auto; }

add in js

$(function() {
  floatingform();
});

function floatingform() {
  var getwidth = $('.floatingSection').outerWidth();
  var skipheader = $('.floatingSection').data('skipheader');
  var easing = 'linear';

  $('.floatingSection').css({
    'right': -getwidth
  });

  var tapButton = $('.floatingSection li > span').outerWidth();
  $('.floatingSection li > span').css({
    'left': -tapButton
  });

  $('.floatingSection li').hover(function() {
    var $this = $(this);
    var eleWidth = $this.width();

    if ($this.data('easing')) {
      $this.stop(true, true).animate({
        right: eleWidth
      }, 500, easing);
    }
  }, function() {
    var $this = $(this);
    if ($this.data('easing')) {
      $this.animate({
        right: '0'
      }, 500, $this.data('easing'));
    }
  });

  $('.floatingSection li.onclick > span').on('click', this, function() {
    $this = $(this).closest('li');
    if ($this.hasClass('opened')) {
      $this.animate({
        'left': '0'
      }).removeClass('opened');
      $('.overlay').fadeOut(300);
    } else {
      $this.animate({
        'left': -getwidth
      }).addClass('opened');
      $('.overlay').fadeIn(300);
    }
  });

  /* Black Overlay */
  $('.overlay').on('click', this, function() {
    $('.floatingSection li.onclick').animate({
      'left': '0'
    }).removeClass('opened');
    $('.overlay').fadeOut(300);
  });

  /* Close Form On Click  */
  $('.closesideform').click(function() {
    $('.overlay').trigger('click');
  });

  /* Open Form On Click  */
  $('.opensideform').click(function() {
    $('.floatingSection li.onclick > span').trigger('click');
  });

  $(window).scroll(function(e) {

    if ($(window).width() >= 767) {

      if ($('.floatingSection')[0]) {
        var skipHeight = $(skipheader).outerHeight();
        if (($(window).scrollTop() >= skipHeight)) {
          $('.floatingSection').fadeIn(300);
        } else {
          $('.floatingSection').fadeOut(300);
        }
      }

    }

    if ($(window).width() <= 767) {
      $('.opensideform').click(function() {
        $('.overlay').hide();
        $('html, body').stop(0, 0).animate({
          scrollTop: $('body').offset().top
        });
      });
    }

  });

}

Working Example

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s