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

<强> Demo

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

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

2 个答案: