jquery - 如何使div固定在特定的滚动级别

Question

我想让一个特定的侧边 div 固定在一个特定的滚动级别，一个完美的例子是堆栈 oveflow 提问页面右侧的“如何格式化”栏。只需尝试提出问题即可查看。这怎么可能 ？使用 css 或 jquery。

Answer 1

这是一个如何实现这一点的简单示例，我们监听 window onscroll 事件，如果 $(window).scrollTop() 高于某个阈值，我们将 .fixed 类添加到我们的侧边栏，否则将其删除。 .fixed 类设置 position:fixed 以使其固定。查看 fiddle 以获得完整的工作示例。

jsFiddle

JS

$(window).scroll(function () {
    var threshold = 100;
    if ($(window).scrollTop() >= 100)
        $('#sidebar').addClass('fixed');
    else
        $('#sidebar').removeClass('fixed');
});

CSS

#sidebar {
    position:absolute;
    width:80px;
    background-color:#0F0;
    height:200px;
}

#sidebar.fixed {
    position:fixed;
    top:0;
}

HTML

<header>
    I'm the header
</header>
<div id="container">
    <aside id="sidebar">
        I'm a sidebar
    </aside>
    <section id="content">
        ...
    </section>
</div>