はjqueryのvarはリサイズに更新されているが、複数回

Question

を保存していない私は、位置を持つdiv要素を有効化/無効化することを目的とjqueryのスクリプトのこの部分を作成しました：ユーザーがスクロールしたどのくらいに基づいて固定（それは基本的にです他の人が作ったスクリプトの組み合わせ、私が採用したスクリプトなど）意図的に最初は動作していますが、ウィンドウのサイズを変更すると破損します。私は結論には、エラーが古い変数には、私がそうしようとしたにもかかわらず、サイズ変更時に正しく更新されていないに位置しています。私は答えをたくさん探しましたが、できなかったのです。

エラーを見つけるためにconsole.logをいくつか作りましたが、私が見つけたものは次のとおりです： ページを読み込むとうまくいきますが、ウィンドウのサイズを変更すると "indholdScroll"スクロールするとき。スクロールすると（1時間をリサイズし、あなたがより多くの時間をリサイズした場合でも、複数回呼び出された場合に2つの呼び出し）、変数「containerOffsetTopは」2回と呼ばれています。最初の呼び出しでは、変数は初期値（ページロードから）を持ち、2番目の呼び出しでは、ウィンドウサイズ変更に基づいて新しいサイズの値を持ちます。

ので、問題があることである：変数の古い値が置き換えられない

1. （私のトラブルを引き起こしている、具体的変数の「containerOffsetTop」、）
2. 機能/変数ウィンドウがサイズ変更された回数に基づいて、 "indholdScroll"が複数回呼び出されます。

私は本当にこれのための解決策を見つけようとしましたが、運がありません。あなたが私を助けることができるならば、私はあなたに頼んでいます。

これは私のスクリプト（誰かがそれを「再生」したい場合jsfiddle、およびコードそれ自身）である：私はHTMLを含めるようにフィドルを更新しました
- リンク： https://jsfiddle.net/4got971s/5/

jQuery(window).on("load", function() { 
    if ((window.location.href.indexOf("katalog") === -1) && (window.location.href.indexOf("detail") > -1)) { 
     var indholdScroll; 
     indholdScroll = function() { 
      var plHeight = jQuery("#PL-container").innerHeight(); 
      if (window.innerWidth > 560 && jQuery(window).innerHeight() > 590) { 
       jQuery(".indhold-container").css("height", plHeight); 
      } else { 
       jQuery(".indhold-container").css("height", "auto"); 
      }; 
      var windw = this; 
      var indholdDivHeight = jQuery(".indhold-inner").outerHeight(true); 
      var indholdTop = parseInt(jQuery(".indhold-inner").css('top'), 10); 
      var mainPadding = parseInt(jQuery("#main").css("paddingTop"), 10); 
      var entryHeaderHeight = jQuery(".entry-header").outerHeight(true); 
      var indholdHeight = jQuery(".entry-footer").offset().top - indholdTop - indholdDivHeight; 
      var thresholdCrossed = false; 
      var thresholdCrossedTop = false; 

      var containerOffsetTop = jQuery("#PL-container").offset().top; 

      jQuery.fn.followTo = function(pos) { 
       var $this = this, 
        $window = jQuery(windw); 

       jQuery(window).scroll(function(e) { 
        var scroll = jQuery(window).scrollTop(); 

        //console.log for testing purpose 
        console.log("scroll: " + scroll); 
        console.log("scroll containeroffsetTop: " + containerOffsetTop); 
        console.log(scroll >= containerOffsetTop); 

        jQuery(function() { 
         if (!thresholdCrossedTop && scroll >= containerOffsetTop) { 
          $this.addClass("fixedscroll"); 
         } else if (!thresholdCrossed && scroll >= pos) { 
          $this.removeClass("fixedscroll"); 
          $this.addClass("posibot"); 
         } else if (thresholdCrossed && scroll <= pos) { 
          $this.removeClass("posibot"); 
          $this.addClass("fixedscroll"); 
         } else if (thresholdCrossedTop && scroll <= containerOffsetTop) { 
          $this.removeClass("fixedscroll"); 
         }; 
        }); 
        thresholdCrossed = scroll > pos; 
        thresholdCrossedTop = scroll > containerOffsetTop; 
       }); 
      }; 

      jQuery('.indhold-inner').followTo(indholdHeight); 

     }; 
     indholdScroll(); 
     var timeOutResize; 
     jQuery(window).resize(function() { 
      clearTimeout(timeOutResize); 
      timeOutResize = setTimeout(function() { 
       indholdScroll(); 
      }, 500); 
     }); 
    }; 
}); 

EDITコード上で正しいものになりました。私はそれがjsfiddleで動作させるために、スクリプトを少し変更しなければならなかったことに注意してください - 「スクロール「$（ウィンドウ）.scroll」を「$（」＃ページ）」の例として。

EDIT 2：
問題の「div」は「.indhold-inner」で、ページの右側にわずかな灰色の背景と「spring til overskrift」というテキストが表示されます。

EDIT 3：これまで
解決策：@skobaljicは答え ように、私は、変数を更新するために、リサイズ時に呼ばれている機能indholdScroll()関数内fn.followTo定義と関数の呼び出しを、含まれていました。しかし、関数を分離することは、グローバル変数を作成する必要がありました（私は思っていますか？）私は確信していませんベストソリューションですか？更新されたスクリプト（これまでのところ解決策は）ここに発見され、意図したとおりに動作しているようだすることができます：https://jsfiddle.net/4got971s/13/

Answer 1

はあなたがするたびに新しいjQuery(window).scrollイベントを設定しindholdScroll機能、内部jQuery('.indhold-inner').followTo(indholdHeight);を呼んでいます。また、jQuery.fn.followToは、indholdScrollの外で定義する必要があります。