html - 制作一个固定在特定高度的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 以将位置设置为固定以及您希望它执行的任何其他操作时，if 语句将启动。

希望对您有所帮助。