Html 当页面向下滚动时，元素保持在顶部，但始终位于页眉下方

请在此处查看此JSFIDLE:

我希望右边的红色元素始终位于顶部，但永远不要覆盖标题。因此，当页面没有向下滚动时，它位于某个位置，例如从顶部开始的200px。当我向下滚动，窗口顶部碰到它时，它会随着页面一起向下移动，粘在顶部。我使用的代码如下：

<header>header</header>
<div class="overflow">
    <div class="left">
        Some content here, doesn't matter what... 
    </div>

    <aside>
        This is a key element
    </aside>
</div>

---

如果您不介意jQuery的话，可以使用粘性导航栏技术来实现此功能

诀窍是绝对/相对地定位元素而不是固定，然后在scroll上应用固定类

---

如果您不介意jQuery的话，可以使用粘性导航栏技术来实现此功能

诀窍是绝对/相对地定位元素而不是固定，然后在scroll上应用固定类

---

谢谢@KennyGHanson-这正是我想要的！好的，Doney您的代码可以用更小的方式编写-。谢谢@Fabricio matté。我已经用建议的代码和fiddle链接更新了我的答案。我还在学习，非常感谢你的评论。不客气。好的，我的重写主要是一个你可以做的例子，事实上，你以前的函数声明+函数调用在技术上比my.scroll稍快，后者有创建和调度scroll事件的开销。说到性能，还可以像使用elem一样缓存$window对象。好吧，这些都只是微小的优化，无论如何都不会有任何明显的区别。谢谢@KennyGHanson-这正是我想要的！好的，Doney您的代码可以用更小的方式编写-。谢谢@Fabricio matté。我已经用建议的代码和fiddle链接更新了我的答案。我还在学习，非常感谢你的评论。不客气。好的，我的重写主要是一个你可以做的例子，事实上，你以前的函数声明+函数调用在技术上比my.scroll稍快，后者有创建和调度scroll事件的开销。说到性能，还可以像使用elem一样缓存$window对象。嗯，这些都只是微观优化，无论如何都不会有任何明显的区别。

body {margin:0; padding:0}
header {width:100%; height:200px; background-color:#994499; margin-bottom:30px;}
.overflow {overflow:hidden; width:450px; margin:0 auto;}
.left {float:left; width:300px; background-color:yellow; margin-right:20px; height:1000px;}
aside {position:fixed; top:230px; margin-left:350px; background-color:red;}

$(function () {
    var elem = $('aside'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('fixed', $(window).scrollTop() > elemTop);
    }).scroll();
});