Javascript 需要为scrollToFixed调整页面大小

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

问题已修复。单击“加载更多”按钮时，摘要div不工作

我在主页上显示了10篇文章，如果用户希望看到另外10篇文章，那么用户需要单击“加载更多”按钮

如果单击此按钮，则右侧有一个.summary div。在该页面上向下滚动，然后会出现另一个摘要div，以及何时会出现另一个摘要div。摘要div已停止，已修复，已新建。摘要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>

---

我想我需要调整新来者的div摘要页面的大小。我该怎么做

您可以尝试以下操作：将其包装到函数中：

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上就会出现问题。

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

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