Question

请在此处查看此jsfiddle：jsfiddle。

我希望右边的红色元素始终位于顶部，但绝不会覆盖标题。因此，当页面没有向下滚动时，它就在某个地方，例如从顶部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>

和CSS：

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;}

Answer 1

您可以使用＆＃34;粘性导航栏＆＃34;如果你不介意jQuery，那么这个功能的技术。

诀窍是绝对/相对地定位与固定相对的元素，然后在滚动上应用固定的类。

JSFiddle

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

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

1 个答案: