html - 将 div 固定在特定高度

Question

在我的 Web 布局中，我使用左侧栏和内容 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 以将位置设置为固定以及您希望它执行的任何其他操作时，if 语句就会启动。

希望有帮助。

Answer 2

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

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

Answer 3

我不是 100% 确定你在说什么，但是：

在 css 中给 div 一个高度。例如：

#div_name {
    height: 575px;
}