Unable to access variable and apply certain CSS using object literal module pattern

I'm unable to access my DOM selectors even though I cached "this" before the window event.

If I were to change it to just $('.banner') it works.
Before in my code, I had scrolltop on the window event set the variable scrolled which I was able to use in my scrollEvent() method using module.scrolled.

Also, the opacity rule in the CSS is not working.
The top and relative position is though.

var parallax = {
  init: function() {
    this.cacheDom();
    this.scrollEvent();
  },

  cacheDom: function() {
    var $window = $(window),
      banner = $('.banner'),
      callout = $('.callout'),
      bannerHeight = Math.round(banner.outerHeight()),
      hideElem = false,
      hasScrolled = false,
      scrolled;
  },

  scrollEvent: function() {
    var module = this;
    $(window).on('scroll', function() {
      var scrollTop = $(this).scrollTop();
      module.banner.css("background-position", '50%' + (scrollTop / 1.75) + "px");
      module.callout.css({'position': 'relative', 'top' : scrollTop * 0.75, 'opacity' :  1 - (scrollTop / module.bannerHeight * 2)});
    });
  }
};

parallax.init();