将div固定在特定高度

Question

在我的网页布局中，我使用的是左侧栏和内容div，它们两者都想滚动，但是在左侧栏内容完成后的某个时刻，左侧栏div div必须固定不变，仅内容要滚动

Answer 1

您将需要使用javascript或本例中的jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).scroll(function(e) {
    var divTop = $("#div-name").offset().top,
        stopPoint = 400;

    if ($(this).scrollTop() >= (divTop + stopPoint) && $('.scroller').css('position') != 'fixed') {
        $('#div-name').css({
            'position': 'fixed',
            'top': '0px',
            'height': '300px',
            'overflow-y': 'scroll'
        });
    }
});
</script>
<style>
    #div-name
    {   
        margin-top:45px;
        padding:15px;
        width:250px;
        height:1200px;
        background-color:#ccc;
    }
</style>

第一行调用jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

以下脚本通过其ID查找div并获得其最高点。 停止点是您希望div在停止之前滚动多远。

当屏幕滚动到停止点并更改css以将位置设置为fixed以及您想要执行的其他任何操作时，if语句将启动。

希望能有所帮助。

Answer 2

我不确定您在说什么，但100％知道：

给div的CSS高度。 例如：

#div_name {
    height: 575px;
}

Answer 3

据我了解，这就是您所需要的！

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/