滚动以解决滚动问题

Question

我正面临着修复大篇文章的问题。该插件可在此处找到：https://github.com/bigspotteddog/ScrollToFixed。情况是我不会在文章的顶部修改一些文章编号。当我向下滚动时，在到达下一篇文章时，该数字必须向上滚动。顺路很顺利，没有任何差距或数字。但是当我慢慢向上滚动时，我的卷轴上有一个间隙，滚动不正常。当我快速向上滚动时，数字会相互影响。

我的剧本：

$(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>

我的css：

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; */ }

有人可以帮我解决这个问题吗？我也做了一个小提琴，向下滚动工作正常，向上滚动在数字不顺畅的开关上。 https://jsfiddle.net/45ab7pka/4/

Answer 1

我理解你在向上滚动时遇到问题，所以我在其他情况下对你的代码进行了一些更改，我已经对你的小提琴代码进行了更改，这可能对你有帮助，链接在下面。

fiddle code here                       
 https://jsfiddle.net/45ab7pka/4/

Answer 2

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