Jquery 当DIV到达页脚时停止滚动

我尝试了一个滚动div到达页脚脚本。如果richt div比left div长，脚本工作正常。但是在我的示例中，right div短，left div超过了我的页脚。如果text class row短，则footer在底部屏幕上，而other始终在row div的底部

有人能帮我解决吗？将位置更改为其他位置，然后进行修复是不起作用的

我的示例代码：

css:

html:

脚本：

// linker menu

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('.cell-left>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 60;
        var visibleFoot = 100 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if(scrollTop < 300 - 60){
            $el.css({
                top: (300 - scrollTop) + "px",
                bottom: "auto",
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 60,
                bottom: "auto"
            });
        }
    });
});

$(function() {
    var sticky = jQuery('.cell-left').offset().top; 
    console.log(sticky);
    jQuery(window).scroll(function(){ // scroll event
        var windowTop = jQuery(window).scrollTop();   
        console.log(windowTop);
        if (sticky < windowTop) {
             jQuery('.cell-left').css({ position: 'fixed', top: 0 });
        }
        else {
            jQuery('.cell-left').css('position','static');
        }
    });   
});

---

我尝试做的是：当页面滚动时，左div保持在顶部，直到页脚出现，然后他滚动到页脚上方

如果您试图在用户向下滚动时将链接文本粘贴到顶部，这可能会对您有所帮助

我已经减少了一些内容，以便于滚动

html:

// linker menu

$(function() {
    $.fn.scrollBottom = function() {
        return $(document).height() - this.scrollTop() - this.height();
    };

    var $el = $('.cell-left>div');
    var $window = $(window);

    $window.bind("scroll resize", function() {
        var gap = $window.height() - $el.height() - 60;
        var visibleFoot = 100 - $window.scrollBottom();
        var scrollTop = $window.scrollTop()

        if(scrollTop < 300 - 60){
            $el.css({
                top: (300 - scrollTop) + "px",
                bottom: "auto",
            });
        }else if (visibleFoot > gap) {
            $el.css({
                top: "auto",
                bottom: visibleFoot + "px"
            });
        } else {
            $el.css({
                top: 60,
                bottom: "auto"
            });
        }
    });
});

<div id="wrapper">
<div id="header1">header 1 </div>

<div class="row">
    <div class="cell-left">
        <div>
        links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links<br>links

        </div>

    </div>
    <div class="cell-right">
        content rechts
    </div>

</div>
<div id="footer">
    <div class="footertext">

$(function() {
    var sticky = jQuery('.cell-left').offset().top; 
    console.log(sticky);
    jQuery(window).scroll(function(){ // scroll event
        var windowTop = jQuery(window).scrollTop();   
        console.log(windowTop);
        if (sticky < windowTop) {
             jQuery('.cell-left').css({ position: 'fixed', top: 0 });
        }
        else {
            jQuery('.cell-left').css('position','static');
        }
    });   
});

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    color:#000000;
    font-size:11pt;
    FONT-FAMILY: Arial,verdana;
    text-decoration : none;
    line-height: 19px;
}
#wrapper {
    height:100%;
    width:995px;
    display:table;
    margin-left:auto;
    margin-right:auto;
}
#header1 {
    display:table-row;
    width:995px;
    height:300px;
    background-color: #CC00FF;
}

#footer {
    display:table-row;
    width:995px;
    height:600px;
    background-color: #FF6666;
}
.footertext {
    float: left !important;
    margin: 7px 0px 0px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
}
.row {
    height:100%;
    display:table-row;
    background-color: #FF9999;
    height: 280px;
}
.cell-right {
    display:table-cell;
    float: right;
    width:500px;
    padding-right:10px;
    background-color: #3300CC;
}
.cell-left {
    float: left;
    width:245px;
    min-height: 100%;
    padding-left:10px;
    padding-top:0px;
}