an overlay that triggers when scroll hits bottom 10% of any page on the warbyparker.com site with option to close overlay

bx.js

(function(){     
  var cartTotal = 0,         
      cartQuantity = 0,
      overlayPicture;

//initialize when scroll is 90% or over of the document height. 
  var Cart = {
      init: function() {
        $(window).scroll(function(){
          if ($(this).scrollTop() >= ($(document).height() - ($(this).height()))){
            $(window).off("scroll");
            Cart.get();
//get method to fetch cart info when scroll hits 90% or more of doc height.
            }
          });
        },
      get: function() {
          $.get('https://www.warbyparker.com/api/v1/cart').success(function(response) {
            if(response.line_items){
              $.each(response.line_items, function(index, product) {
                  cartTotal    += product.amount;
                  cartQuantity = response.line_items.length;
//overlay & background triggers only after the cart info has been fetched. 
                });
              }
              Cart.createBackground();
              Cart.overlay(cartTotal, cartQuantity);
            });
        },
      createBackground: function(){
          $('<div>', {
              'id': 'background',
              'css': {
                'position': 'fixed',
                'background-color': 'rgba(0, 0, 0)',
                'width': '100%',
                'height': '100%',
                'top': '0',
                'bottom': '0',
                'left': '0',
                'right': '0',
                'opacity': '.5',
                'z-index': '100',
                'overflow': 'scroll'
                }
          }).appendTo('body');
        },
      overlay: function(total, quantity) {
          $('<div>', {
              'id': 'overlaycard',
              'html':  
                "<br><br><br><img src='//s.warbyparker.com/images/logo.png?v=d11a25bbdb35ca05cf786660012497d0'><br><br><h2>You have "
                + (cartQuantity) + " items in your cart that total $"
                + (cartTotal/100).toFixed(2) 
                +". <br> Are you sure you would like to leave?</h2>"
                + "<a href='/checkout'><span class='checkout-button cart-button button'>Return to Checkout</span></a>",
              'css': {
                'position': 'fixed',
                'width': '600px',
                'height': '400px',
                'margin-top': '-150px',
                'margin-left': '-300px',        
                'text-align': 'center',
                'left':'50%',
                'top':'50%',
                'background': 'white',
                'z-index': '1000',
                'border-radius' : '25px'
              },

            }).appendTo('body');
          $('<div>', {
            'id': 'remove',
            'html': 'x',
            'css':{
              'background-color':'white',
              'color':'#00a9ff',
              'margin': '15px 25px 35px 0px',
              'padding':'2px',
              'text-align':'top',
              'width':'10px',
              'float':'right',
            },

          }).prependTo('#overlaycard');
        $("#remove").on("click", function(){
          $("#overlaycard").remove();
          $("#background").remove();
        });
      }
    };
  Cart.init();
})();