Question

我正在尝试使用ScrollToFixed插件，但我有一个问题。

问题是固定的.summary div在点击加载更多按钮时无效。

如果用户想要查看另外10个帖子，那么我在主页面显示10个帖子，然后用户需要点击加载更多按钮。

如果您点击此 DEMO ，则会有.summary div右侧。在该页面上向下滚动然后另一个摘要div将出现，当另一个摘要将首先.summary div stoped fixed和新.summary div为固定。我在网站上使用这个想法。

    <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;
});

摘要div将使用此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成功函数。这应该重新初始化插件。

需要调整scrollToFixed的大小页面

1 个答案: