Question

问题：

停止某个div的滚动功能。

HTML和JQuery代码：

<!DOCTYPE html>
<html>
    <head>
        <title>En enkel webbsida i HTML5</title>    
        <meta charset="utf-8">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.6.1/jquery.smooth-scroll.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                (function($) {
                    var element = $('#kategori'),
                        originalY = element.offset().top;

                    // Space between element and top of screen (when scrolling)
                    var topMargin = 0;

                    // Should probably be set in CSS; but here just for emphasis
                    element.css('position', 'relative');

                    $(window).on('scroll', function(event) {
                        var scrollTop = $(window).scrollTop();

                        element.stop(false, false).animate({
                            top: scrollTop < originalY
                                    ? 0
                                    : scrollTop - originalY + topMargin
                        }, 300);
                    });
                })(jQuery);
            })
        </script>
    </head>
    <body>
        <ul id="kategori">
            <li class="button" id="showdiv1"><a href="#">specialiteter</a></li>
            <li class="button" id="showdiv2"><a href="#">förrätter</a></li>
            <li class="button" id="showdiv3"><a href="#">skaldjur och fisk</a></li>
            <li class="button" id="showdiv4"><a href="#">kyckling och anka</a></li>
            <li class="button"><a href="#">biff och fläsk</a></li>
            <li class="vertical"><a href="#">stekta nudlar och stekta ris</a></li>
            <li class="vertical"><a href="#">diverse rätter</a></li>
            <li class="vertical"><a href="#">efterrätter</a></li>
            <li class="vertical"><a href="#">extra tillbehör</a></li>
            <li class="vertical"><a href="#">måltidsdrycker</a></li>
        </ul>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <div id="space">Test</div>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </body>
</html>

所需解决方案：

当达到id #space时停止滚动功能。

停止JQuery滚动某个div

0 个答案: