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