滚动以修复向上滚动的问题

Scroll to fix issue with scrolling up

本文关键字：滚动问题更新时间：2023-09-26

我遇到了一个问题，滚动到固定的大文章。插件可以在这里找到：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/

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