ReferenceError: viewportHeight is not defined

What Im doing wrong in this javascript code? Its a toggle which displays an ads in body behind the content of my website.

But Im getting ReferenceError: viewportHeight is not defined and the toggle doesnt work in fade effect with animation but its opening without slide effect.What Im doing wrong here thankyou for your help.

jQuery(window).ready(function(a) {
  var viewportWidth = a(window).width();
  "undefined" == typeof a.cookie("wp_skin") || "no" == a.cookie("wp_skin") ? a("#pd-page").removeClass("event-on") : a("#pd-page").addClass("event-on"), a(".btn-event-toggle").click(function() {
      a("#pd-page").hasClass("event-on") ? (a("#pd-page").removeClass("event-on"), a.cookie("wp_skin", "no", {
          expires: 1,
          path: "/"
      })) : (a("#pd-page").addClass("event-on"), a.cookie("wp_skin", "yes", {
          expires: 1,
          path: "/"
      }))
  }), a("#pd-page").outerHeight() - viewportHeight > 200 && a("#header-affix").affix({
      offset: {
          top: 350,
          bottom: function() {
              return this.bottom = a("footer").outerHeight(!0)
          }
      }
  }).on("affixed.bs.affix", function() {
      a("#pd-page").addClass("affixed"), a("#header-affix").css({
          top: -90
      }), a("#header-affix").animate({
          top: 0
      }, 230)
  }).on("affixed-top.bs.affix", function() {
      a("#pd-page").removeClass("affixed"), a("#header-affix").css({
          top: 0
      })
  }), a("#ticker").inewsticker({
      speed: 5e3,
      effect: "fade",
      dir: "ltr",
      delay_after: 5e3
  })
});