Javascript 位于其父元素外部的粘性div

我正在尝试在左侧创建sticky div（使用Bootstrap 4 beta v2），而不使用CSS，它将跟随用户滚动。我已经让它大部分工作，但当我滚动时，sticky 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>

$（文档）.ready（函数（）{
函数为Crolledto（elem）{
var docViewTop=$（window）.scrollTop（）；//当前屏幕上方隐藏的像素数
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；//元素上方的像素数
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemTop sticky.offset（）.top）{
css（'position'，'absolute'）；
css（'top'，stopHeight）；
}
});
});

您能创建一个JSFIDLE吗？这将有助于调试。您可以创建一个JSFIDLE吗？这有助于调试