需要調整大小頁面scrollToFixed

Question

我想使用ScrollToFixed插件，但我有一個問題。

問題已修復.summary當點擊加載更多按鈕時，div不工作。

我在主頁面顯示10篇文章，如果用戶想看另外10篇文章，那麼用戶需要點擊加載更多按鈕。

如果您點擊這個DEMO div右邊有一個.summary。在該頁面上向下滾動，然後另一個彙總div會來，當另一個彙總將首先.summary div停住固定和新的.summary股利是固定的。我正在使用這個想法爲我的網站。

<div class="globalHeader">Header</div> 
    <div class="container"> 
     <div class="post_area"> 
     <div class="user_avatar"> 
      <div class="summary"><img src="uavatar/avatar.jpg"/></div> 
     </div> 
      <div class="post_details">text, images or anything else</div> 
     </div> 
     <!--Other 9 <div class="post_area"><div class="user_avatar"><div class="summary"></div></div> is here--> 
    </div> 
    <div class="load_more_button">Click To see other 10 post</div> 
    </div> 
<div class="footer">Footer</div> 

我不得不箱負載更多按鈕的代碼：

$('.load_more_button').live("click",function(event) // when i click load more button 
{ 
event.preventDefault(); 
var ID = $(this).attr("id"); 
var P_ID = $(this).attr("rel"); 
var URL=$.base_url+'show_other_post_ajax.php'; 
var dataString = "lastid="+ ID+"&profile_id="+P_ID; 
if(ID) 
{ 
$.ajax({ 
type: "POST", 
url: URL, 
data: dataString, 
cache: false, 
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); }, 
success: function(html){ 
$("div.post_area").append(html); 

$(window).load(); 
$("#more"+ID).remove(); 
} 
}); 
} 
else 
{ 
$("#more").html('The End');// no results 

} 
return false; 
}); 

摘要格將固定用這段JavaScript代碼：

$(document).ready(function() { 

     // Dock the header to the top of the window when scrolled past the banner. 
     // This is the default behavior. 

     $('.header').scrollToFixed(); 

     // Dock the footer to the bottom of the page, but scroll up to reveal more 
     // content if the page is scrolled far enough. 

     $('.footer').scrollToFixed({ 
      bottom: 0, 
      limit: $('.footer').offset().top 
     }); 


     // Dock each summary as it arrives just below the docked header, pushing the 
     // previous summary up the page. 

     var summaries = $('.summary'); 
     summaries.each(function(i) { 
      var summary = $(summaries[i]); 
      var next = summaries[i + 1]; 

      summary.scrollToFixed({ 
       marginTop: $('.header').outerHeight(true) + 10, 
       limit: function() { 
        var limit = 0; 
        if (next) { 
         limit = $(next).offset().top - $(this).outerHeight(true) - 10; 
        } else { 
         limit = $('.footer').offset().top - $(this).outerHeight(true) - 10; 
        } 
        return limit; 
       }, 
       zIndex: 999 
      }); 
     }); 
    }); 

我想我需要調整的頁面div的新人總結需要修正。我該怎麼做呢？

Answer 1

你可以試試這個：在一個函數把這個包：

function initSummaryScroll() { 
    var summaries = $('.summary'); 
    summaries.each(function(i) { 
     var summary = $(summaries[i]); 
     var next = summaries[i + 1]; 

     summary.trigger('detach.ScrollToFixed'); // ADD THIS **UPDATE** 
     summary.scrollToFixed({ 
      marginTop: $('.header').outerHeight(true) + 10, 
      limit: function() { 
       var limit = 0; 
       if (next) { 
        limit = $(next).offset().top - $(this).outerHeight(true) - 10; 
       } else { 
        limit = $('.footer').offset().top - $(this).outerHeight(true) - 10; 
       } 
       return limit; 
      }, 
      zIndex: 999 
     }); 
    }); 
} 

然後調用它的負載，initSummaryScroll();並在你的Ajax成功功能。這應該重新初始化插件。