Javascript - ScrollToFixed动态div id

时间:2014-12-23 11:01:13

标签: javascript php jquery

我正在尝试使用ScrollToFixed.js

制作滚动条

这是我的观点:

<ul id="summary1" class="summary">
                    <li class="caption">Summary 1</li>
                    <li class="contents">
                        <p>There are three floating summaries on the right of this page.  They are anchored to their respective sections.</p>

                        <p>Once a summary reaches the bottom of the header above, it will stop there until the next section summary arrives.  Then, it will continue up the page.</p>

                        <p>The last summary will get pushed up the page by the footer once it undocks to reveal the content below it.</p>
                    </li>
                </ul>

<ul id="summary3" class="summary">
                        <li class="caption">Summary 3</li>
                        <li class="contents">
                            <p>There are three floating summaries on the right of this page.  They are anchored to their respective sections.</p>

                            <p>Once a summary reaches the bottom of the header above, it will stop there until the next section summary arrives.  Then, it will continue up the page.</p>

                            <p>The last summary will get pushed up the page by the footer once it undocks to reveal the content below it.</p>
                        </li>
                    </ul>

这是javascript:

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

如果数字是连续的,它将成功运行。但如果没有,它根本不起作用。我知道var next = summaries[i + 1];中存在错误,然后我将其替换为var next = summaries<?php echo $data['id_post']?>;,但仍然无效。

摘要 ID 中的 1 3 是我的id_post。有谁知道如何用id_post改变var next

非常感谢答案......

2 个答案:

答案 0 :(得分:0)

如果我理解正确,你可以这样做:

var summary = $(this);
var next = summary.next('.summary');

尝试一下,让我知道它是否有帮助。

答案 1 :(得分:0)

试试这个

var next = $(this).next('.summary');