将div的底部固定到滚动屏幕的底部

Question

你好，我想知道如何实现这一目标。 我有一个页面，其中有三个div浮动，其宽度分别为20％，60％和19％，所有div的高度都很高，但中间一个的高度总是远大于其他两个。 所以希望每当我滚动页面以查看中间div的底部时，其他div的底部都照原样贴在屏幕上，并在滚动到顶部时自动释放。

我知道这是可能的，这就是我刚刚在网站http://resources.infosecinstitute.com/checking-out-backdoor-shells/上注意到的/最右端的div是所需的类似示例。

谁能帮我实现这一目标。

 onscroll event can be applied here by js like 
 onscroll if // check if the div is about to end then fix it as it is 
  else // release it.

Answer 1

$( "#target" ).scroll(function() {
                    $( "#div_left" ).css( {'position': 'fixed' , 'bottom' : '20px'} );
                    $( "#div_right" ).css( {'position': 'fixed' , 'bottom' : '20px'} );
});

Answer 2

演示版

js

$(window).scroll(function () {
    if ($(this).scrollTop() > $('#test').height()) {
        $('#test').addClass('fixed');
    } else {
        $('#test').removeClass('fixed');
    }
});

的CSS

body, html {
    height:1000px;
    position:relative;
    margin:0;
    padding:0;
}
#test {
    height:50px;
    background-color:blue
}
.fixed {
    position:fixed;
    bottom:0;
    z-index:2;
    width:100%;
}