Question

我尝试了一个scroll-div-reach-footer脚本。如果richt div比左div更长，那么脚本工作正常。但是在我的例子中，右边的div更短，左边的div越过我的页脚（如果文本（类行）很短，则页脚在底部屏幕上，而另一行总是在行div的底部）

有人可以帮我解决问题吗？将位置更改为其他内容然后修复不起作用。

我的示例代码：http://jsfiddle.net/by4AP/

的CSS：

    /* lay-out */

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:100px;
    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;
}
.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;
}
.cell-left>div {
    top: 300px;
    position: fixed;
}

HTML：

<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<br>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<br>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<br>

            </div>

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

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

脚本：

// 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保持在顶部直到页脚，然后他滚动到白色页脚之上。

Answer 1

如果您尝试制作＆＃34;链接＆＃34;当用户向下滚动时，文字会粘到顶部，这可能会帮助您http://jsfiddle.net/39james/pB49G/

我已经删除了一些内容，以便于滚动。

HTML：

<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');
        }
    });   
});

CSS：

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;
}

当DIV到达页脚时停止滚动

1 个答案: