Javascript 通过向上滚动解决问题

我面临着一个问题，滚动到固定的大文章。可以在此处找到该插件：。情况是，我不想在文章的顶部固定一些文章编号。当我向下滚动时，当到达下一篇文章时，数字必须向上滚动。下降的过程非常顺利，彼此之间没有差距或数字。但是当我慢慢地向上滚动时，我的卷轴上出现了一个缺口，卷轴不正常。当我快速向上滚动时，数字彼此重叠

我的剧本：

$(document).ready(function() {
// Dock each summary as it arrives just below the docked header, pushing the
// previous summary up the page.

    var articleblocknr = $('.gwn_betnr');
    articleblocknr.each(function(i) {
        var block = $(articleblocknr[i]);
        var next = articleblocknr[i + 1];

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

我的网页文章：

    <li id="gwn_betnr1" class="gwn_betnr">

        <span class="gwn_betnrf">1</span>

    </li>

    <li class="gwn_bet">

        <span class="gwn_def gwn_illus">Definition 1</span>

        <span class="gwn_bet_beh">

            <span class="gwn_regel">

                <span class="gwn_grijs">test1 </span>

                <span class="gwn_steun">test2</span>

            </span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

            <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p>

        </span>

    </li>

    <li id="gwn_betnr2" class="gwn_betnr">

        <span class="gwn_betnrf">2</span>

    </li>

    <li class="gwn_bet">

        <span class="gwn_def gwn_illus">Definition 2</span>

        <span class="gwn_bet_beh">

            <span class="gwn_regel">

                <span class="gwn_grijs">test1 </span>

                <span class="gwn_steun">test2</span>

            </span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

            <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p>

        </span>

    </li>

    <li id="gwn_betnr3" class="gwn_betnr">

        <span class="gwn_betnrf">3</span>

    </li>

    <li class="gwn_bet">

        <span class="gwn_def gwn_illus">Definition 3</span>

        <span class="gwn_bet_beh">

            <span class="gwn_regel">

                <span class="gwn_grijs">test1 </span>

                <span class="gwn_steun">test2 </span>

            </span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

            <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p>

        </span>

    </li>

    <li id="gwn_betnr4" class="gwn_betnr">

        <span class="gwn_betnrf">4</span>

    </li>

    <li class="gwn_bet">

        <span class="gwn_def gwn_illus">Definition 4</span>

        <span class="gwn_bet_beh">

            <span class="gwn_regel">

                <span class="gwn_grijs">test1 </span>

                <span class="gwn_steun">test2 </span>

            </span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

            <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p>

        </span>

    </li>
<div class="footer">
            ...
</div>

---

有人能帮我解决这个问题吗？我也做了一把小提琴，向下滚动效果很好，向上滚动是在开关上，数字不平滑

奇怪的是，在Firefox上运行良好，但我在其他浏览器上看到了这个问题。我在Firefox中也看到了翻转。在1号和2号之间，一切正常。上下滚动。但是当我在2和3之间的时候。然后非常缓慢地向上滚动，它稍微翻转滚动。当我快速滚动时，数字会相互重叠。是的，我现在注意到了。这种小小的跳跃只发生在上升时遇到的第一个数字上。但让我们看看答案是什么…我看到的唯一变化是你把“限制”改为“5”？else语句中没有任何更改？这段代码中也有同样的错误。

body, html { margin:0; padding:0; color:#2a2a2a; background:#fff; } .footer { display: block; background:#f2f2f2; clear: both; } .gwn_romp { list-style: none; padding: 0px; margin: 0px; } .gwn_betnr { float:left; width:1.250em; height: 2.300em; text-align: center; font-weight: bold; border-top: 1px solid black; /*padding-top: 0.450em;*/ /* 28px - 19px (l2b) = 9px */ overflow: hidden; } .gwn_bet { float: left; margin-left: 1.400em; } .gwn_def { display: block; color: #000; } .gwn_bet_beh { display: block; } .gwn_regel { display: block; /* clear: both; */ }

$(document).ready(function() { console.log('test');
    // Dock each summary as it arrives just below the docked header, pushing the
    // previous summary up the page.

    var articleblocknr = $('.gwn_betnr');
    articleblocknr.each(function(i) {
        var block = $(articleblocknr[i]);
        var next = articleblocknr[i + 1];

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