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以将位置设置为固定加上您希望它执行的任何其他操作时，if语句启动。

希望有所帮助。

Answer 2

我不是100％肯定你在说什么，但是：

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

#div_name {
    height: 575px;
}

Answer 3

根据我的理解，这就是你需要的东西！

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

使div固定在特定高度

3 个答案: