jquery-snippets.md

Bottom out of viewport

window.addEventListener('scroll', function() { 
      var isOut = isBottomOutOfViewport($formstackContactUsFormTarget);
      console.log(isOut)

      if (isOut) {
        $formstackContactUsFormTriggerCloned.addClass('formstack-contact-us-form-cloned--visible');
      } else {
        $formstackContactUsFormTriggerCloned.removeClass('formstack-contact-us-form-cloned--visible');
      }      
    }, false);
  } 

  function isBottomOutOfViewport(elem) {    
    if (typeof jQuery === "function" && elem instanceof jQuery) {
      elem = elem[0];
    }

    var distance = elem.getBoundingClientRect();

    return (
      distance.bottom <= 0
    );
  };

clone and show element if another element any part is in/out of viewport

var $formstackContactUsFormTarget = $('.js-formstack-contact-us-form-target');
  var $formstackContactUsFormTrigger = $('.js-formstack-contact-us-form-trigger');

  if ($formstackContactUsFormTrigger.length && $formstackContactUsFormTarget.length) {    
    
    $formstackContactUsFormTrigger.clone()
                                  .appendTo('body')
                                  .removeClass('js-formstack-contact-us-form-trigger')
                                  .addClass('js-formstack-contact-us-form-cloned formstack-contact-us-form-cloned formstack-contact-us-form-cloned--fixed');

    var $formstackContactUsFormTriggerCloned = $('.js-formstack-contact-us-form-cloned');

    window.addEventListener('scroll', function() { 
      var isOut = isOutOfViewport($formstackContactUsFormTarget);

      if (isOut.any) {
        $formstackContactUsFormTriggerCloned.addClass('formstack-contact-us-form-cloned--visible');
      } else {
        $formstackContactUsFormTriggerCloned.removeClass('formstack-contact-us-form-cloned--visible');
      }      
    }, false);
  } 

  function isOutOfViewport(elem) {  

    if (typeof jQuery === "function" && elem instanceof jQuery) {
        elem = elem[0];
    }

    var bounding = elem.getBoundingClientRect();

    var out = {};
    out.top = bounding.top < 0;
    out.left = bounding.left < 0;
    out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight);
    out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
    out.any = out.top || out.left || out.bottom || out.right;
    out.all = out.top && out.left && out.bottom && out.right;

    return out;

  };

clone and show element if another element any part is in/out of viewport

function isInViewport(elem) {    
    if (typeof jQuery === "function" && elem instanceof jQuery) {
      elem = elem[0];
    }

    var distance = elem.getBoundingClientRect();
    
    return (
      distance.top >= 0 &&
      distance.left >= 0 &&
      distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      distance.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };