html - 固定 Sidebar 与其他元素在同一行

Question

所以基本上我有一个侧边栏，我不想固定在我的页面中，只有我行中的其他列是可滚动的。

我尝试更改元素的 position css 属性，但原始内容会被压缩到第一列。

此处提供我所拥有的演示:JSFiddle

这是我的 HTML:

<div class="container">
            <div class="row">
                <div class="col-4" role="sidebar">
                    <div class="diamond"><span>RS</span></div>
                    <br />
                    <div class="brief">
                        Text here...
                    </div>
                    <form class="search">
                        <input type="text" placeholder="Search...">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form>
                    <ul class="sidebar-menu">
                        <li class="github"><a href="#">Github</a></li>
                        <li class="twitter"><a href="#">Twitter</a></li>
                        <li class="stackoverflow"><a href="#">StackOverflow</a></li>
                        <li class="linkedin"><a href="#">LinkedIn</a></li>
                    </ul>
                </div>

                <div class="col-8" role="content">
                    <h1 class="title">Title</h1><div class="horizontal-rule"></div>
                    <nav class="subnav">
                        <ul>
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li> /
                            <li><a href="#">Link</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

Answer 1

我不知道你想固定哪个元素，但你可以使用这个方法:

<div id="id">
Content of the div
</div>

还有 CSS:

#id {
position: fixed;
left: 30px; // or whatever you want
top: 100px; // or whatever you want
}

希望对你有所帮助!