変数にアクセスできず、オブジェクトリテラルモジュールパターンを使用して特定のCSSを適用できません

Question

ウィンドウイベントの前に「this」をキャッシュしていてもDOMセレクタにアクセスできません。

私がそれをちょうど$('.banner')に変更した場合、それは動作します。
私のコードでは、私はmodule.scrolledを使って私のscrollEvent()メソッドで使用できた変数scrolledをウィンドウイベントのscrolltopに設定しました。

また、CSSの不透明度ルールが機能していません。
しかし、上の位置と相対的な位置は同じです。

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(); 

Answer 1

cacheDom()は、オブジェクトプロパティではなくローカル変数を設定しています。それを次のように変更してください：

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