页面滚动后布局固定怎么做

如图，我希望将右边的布局在滚动后还能够显示。

https://ruby-china.org/topics

ps:

搞定，使用 window scrollTop 值和布局本身 top值进行比较，通过修改布局为 position: fixed实现。

https://gist.github.com/xfstart07/30eaec63dab660f0b012

添加scroll事件，检测页面滚动距离大于一定值（一般为右栏与页面顶部的距离）时切换右栏为fixed布局。

可以试试下面这种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="GBK"/>
    <title>固定上下层的位置</title>
    <style type="text/css">
<!--
body {
    background-image: url(0);
    background-attachment: fixed;
}
#BottomNav {
    background: #9F6;
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    position: fixed;
    top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    overflow: visible;
}
#topNavWrapper {
    height: 30px;
    margin: 0px auto;
    width: 100%;
    z-index: 100;
    position: fixed ;
    top: 0px;
    left: 0;
    background: #9F6;
}
#center {
    width: 100%;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}
-->
    </style>
</head>
<body>
    <div id="topNavWrapper">固定悬浮导航在此处,不随滚动条的滚动变化</div>
    <div id="center">
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
        <p>我是中间层</p>
    </div>
    <div id="BottomNav">固定悬浮导航在此处,,不随滚动条的滚动变化</div>
</body>
</html>

【热门文章】