Как переинициализировать Несколько Липкие Титулы после показа/скрытия элементов

Question

я создал боковую панель с множеством липких названий основаны от кода в этом популярном codepen Например: http://codepen.io/chrissp26/pen/gBrdo

Названия, которые являются липкими, также являются интерактивными, и на нажмите, я показываю/скрываю элементы, связанные с заголовком. Хотя оба липких заголовка и расширение/свертывание связанных элементов, являются функциональными, когда я использую их вместе, я получаю нежелательные результаты. Следующий код является то, что используется для обработки липкого названия:

function stickyTitles(stickies) 
{ 
    this.load = function() 
    { 
     stickies.each(function(){ 

      var thisSticky = jQuery(this).wrap('<div class="followWrap" />'); 
      thisSticky.parent().height(thisSticky.outerHeight()); 

      jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top); 
     }); 
    } 

    this.scroll = function() 
    { 
     stickies.each(function(i){    

      var thisSticky = jQuery(this), 
      nextSticky = stickies.eq(i+1), 
      prevSticky = stickies.eq(i-1), 
      pos = jQuery.data(thisSticky[0], 'pos') - 70; 

      if (pos <= jQuery('#container').scrollTop()) { 
       thisSticky.addClass("fixed"); 

       if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) { 
        thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()); 
       } 
      } else { 
       thisSticky.removeClass("fixed"); 

       if (prevSticky.length > 0 && jQuery('#container').scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight() + 200) { 
        prevSticky.removeClass("absolute").removeAttr("style"); 
       } 
      } 
     });   
    } 
} 

Я вижу, функция вычисления расстояния от вершины, поэтому, когда я свернуть/развернуть элементы, положение относительно верхних изменений. Это и вызывает нежелательный пользовательский опыт. Я добавил следующий код в моем случае щелчка, в надежде, что позиция сверху будет пересчитана после того, как элементы свернуты/расширенными:

var newStickies = new stickyTitles(jQuery(".followMeBar")); 

newStickies.load(); 

jQuery('#container').on("scroll", function() { 
    newStickies.scroll(); 
}); 

К сожалению, позиция, кажется, не пересчитывается, а позиция до расширения/collapsing используются вместо этого.

Я создал этот JSFiddle, демонстрирующий мой вопрос: http://jsfiddle.net/vo78hr4x/1/

Answer 1

использовать функцию загрузки после добавления нового HTML contnent

this.load = function() 
{ 
    stickies.each(function(){ 

     var thisSticky = jQuery(this).wrap('<div class="followWrap" />'); 
     thisSticky.parent().height(thisSticky.outerHeight()); 

     jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top); 
    }); 
}