需要调整大小页面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成功功能。这应该重新初始化插件。