16

是否可以固定元素相对于父 div 的位置，而不是浏览器窗口？

说我有：

<div id="pagecontainer">

    <div id="linkspage">

        <div class="sidelinks">
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="linkscontent">
            content of links page
        </div>

    </div>

    //OTHER PAGES

</div>

基本上一个页面有两个部分，左边部分是链接列表，而右边部分是页面的内容。我希望内容可滚动，但链接保持固定到父#pagecontainer，因此当#pagecontainer 滚动时它们不会滚动，但当我滚动整个浏览器窗口时它们会移动。

我已经尝试过 JQuery“fixto”插件：https ://github.com/bbarakaci/fixto 。但是我不能使用那个，因为当父元素（#pagecontainer）的 alpha 为 0 时，我的页面淡入/淡出并且脚本出错，它认为父元素已经消失并且无处可修复。

谢谢。

4

2 回答 2

40

给父母position: relative，像这样：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
}

见演示。

于 2013-03-02T00:34:22.913 回答
1

我为你创建了这个CodePen。

从你的描述来看，已经成功了一半。

但是当我滚动整个浏览器窗口时它们会移动。

您将需要使用iframe或某种 JavaScript 解决方案。

于 2013-03-02T01:38:46.677 回答