JQuery - var не обновляется при изменении размера, но сохраняется несколько раз

Question

Я создал этот кусок jquery-скрипта с целью включения/отключения div, имеющего позицию: исправлено в зависимости от того, насколько далеко прокручивается пользователь (это в основном комбинация скриптов, которые сделали другие, которые я принял - так им доверяют). Сначала он намеренно работает, но при изменении размера окна он ломается. Я пришел к выводу, что ошибка заключается в том, что старые переменные не обновляются правильно при изменении размера, хотя я и пытался это сделать. Я много искал для ответа, но не смог.

Я сделал несколько console.log, чтобы найти ошибку, и то, что я нашел, это то, что: Когда я загружаю страницу, она работает нормально - однако, когда я изменяю размер окна, функция «indholdScroll» получает вид дублирования при прокрутке. При прокрутке переменная «containerOffsetTop» вызывается 2 раза (2 звонка, если изменить размер 1 раз, и вызывается еще больше раз, если вы больше изменяли размер). В первом вызове переменная имеет начальное значение (от загрузки страницы) и во втором вызове, оно имеет значение нового размера на основе изменения размера окна.

Таким образом, проблема заключается в том, что:

1. старых значений переменного не заменяется (в частности переменного «containerOffsetTop», который вызывает у меня тревогу)
2. Функции/переменное «indholdScroll» вызывается несколько раз, исходя из того, сколько раз изменение размера окна.

Я действительно пытался найти решение для этого, но без везения. Поэтому я спрашиваю вас, ребята, если вы можете мне помочь.

Это мой сценарий (jsfiddle если кто-то хочет «играть» с ним, и код его самостоятельно): 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:
Я обновил скрипку, чтобы включить HTML - ссылка над кодом теперь правильно. Обратите внимание, что мне пришлось немного изменить скрипт, чтобы он работал на jsfiddle - в качестве примера из «$ (window) .scroll» до «$ (« # page »). Scroll».

EDIT 2:
Обратите внимание, что рассматриваемый «div» является «.indhold-inner» и может быть найден справа от страницы с небольшим серым фоном и текстом «spring til overskrift».

EDIT 3:
Решение до сих пор: Как @skobaljic ответил, я включил fn.followTo определение и вызов функции, внутри функции функции indholdScroll(), которые призваны изменять размеры для обновления переменных. Однако, разделяя функции, требуемые для того, чтобы я сделал переменные глобальными (я думаю?), Которые я не уверен, является лучшим решением? Обновленный сценарий (и решение до сих пор) можно найти здесь, и, кажется, работает как задумано: https://jsfiddle.net/4got971s/13/

Answer 1

Вы вызываете jQuery('.indhold-inner').followTo(indholdHeight); внутри функции indholdScroll, которые каждый раз устанавливает новый jQuery(window).scroll событие. Кроме того, jQuery.fn.followTo должен быть определен вне функции indholdScroll.