粘性div在其父元素之外

Question

我正在尝试在左侧创建粘性div（使用Bootstrap 4 beta v2），而不使用CSS跟随用户滚动。我得到它主要工作，但当我滚动时，粘性div跳出其父元素div（a）。我不确定这是HTML问题还是我的JavaScript搞砸了。

左边的最后一个div按照第一张照片开始包含在父col-sm-3中。但是，在滚动时，当它“捕获”时，你可以看到它突破了col-sm-3并且位于主要内容div之下（这是col-sm-9）。

我的HTML：

<div class="container mt-3">
        <div class="row">
            <div class="col-sm-3 d-none d-md-block">
                <div class="card mt-3">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-block">
                        <h4 class="card-title">Special title treatment</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card mt-3" id="catcher">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-block">
                        <h4 class="card-title">Special title treatment</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card mt-3" id="sticky">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-block">
                        <h4 class="card-title">Special title treatment</h4>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

我的JavaScript：

<!--sticky on scroll javascript-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                function isScrolledTo(elem) {
                    var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
                    var docViewBottom = docViewTop + $(window).height();
                    var elemTop = $(elem).offset().top; //num of pixels above the elem
                    var elemBottom = elemTop + $(elem).height();
                    return ((elemTop <= docViewTop));
                }
                var catcher = $('#catcher');
                var sticky = $('#sticky');
                $(window).scroll(function () {
                    if (isScrolledTo(sticky)) {
                        sticky.css('position', 'fixed');
                        sticky.css('top', '0px');
                    }
                    var stopHeight = catcher.offset().top + catcher.height();
                    if (stopHeight > sticky.offset().top) {
                        sticky.css('position', 'absolute');
                        sticky.css('top', stopHeight);
                    }
                });
            });
        </script>