Question

我想知道是否有办法在div的可见区域内修复元素，如下图所示。

以下是我的问题示例（jsfiddle）：

HTML：

<div id="header" ></div>
    <div id="menu">
        <a id="menu-collapse">collapse</a>
        <div id="some-block"></div>
    </div>
<div id="content"></div>

CSS：

#menu {
    position: fixed;
    top: 70px;
    bottom: 0px;
    left: 0;
    width: 200px;
    background-color: rgb(100, 134, 27);
    overflow-x: auto;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: rgb(27, 48, 0);
    min-width: 540px;
}

#menu-collapse{

}

#content {
    position: fixed;
    top: 70px;
    right: 0px;
    bottom: 0px;
    left: 200px;
    background-color: rgb(27, 118, 0);
}

#some-block{
    position:absolute;
    display:inline;
    background-color: yellow;
    width: 200px;
    height: 2500px;
}

我需要在#menu-collapse的可见区域中间#menu，同时滚动#menu。

Answer 1

在CSS类定义中使用position: fixed;。这将相对于浏览器窗口而不是文档本身定位div，允许它在滚动时保持其位置。

Answer 2

如果您使用position:fixed;属性，现在可以在div区域内修复元素，然后它会自动将其固定到浏览器中。

这是默认功能。

Answer 3

在#menu-collapse上，您需要添加position: fixed;才能使其保持在同一位置。而且，您需要top: 50%;才能将其设置在#menu和z-index: 1;的中间，以便它显示在#some-block之上。

JSFiddle

HTML：

<div id="header" ></div>
<div id="menu">
    <a id="menu-collapse">collapse</a>
    <div id="some-block">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae tortor fermentum, pellentesque lorem vitae, ullamcorper urna. Sed in imperdiet nisl, porta porta sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum euismod sapien a imperdiet placerat. Ut a maximus felis. Mauris porta purus id mi feugiat ultrices. Etiam mattis leo id hendrerit sagittis. Vivamus dapibus blandit ligula varius semper.</p>
        <p>Ut nisl neque, efficitur non risus vitae, luctus cursus dui. Pellentesque aliquam varius cursus. Fusce lobortis, sapien at dictum porta, erat eros rhoncus metus, sit amet finibus libero quam nec nisl. Phasellus tempus ante vitae rutrum ultricies. Fusce sit amet hendrerit quam, egestas gravida risus. Donec eget tristique enim, ac lacinia nunc. Nam pulvinar, nunc et scelerisque ornare, est augue mollis sem, vel vulputate arcu mi et eros. Proin varius arcu vitae nisi porttitor, sit amet finibus eros congue. In dapibus tincidunt tortor. Sed at sem id tortor molestie finibus eget ut sem. In semper feugiat elementum. Morbi enim mauris, venenatis non felis ac, interdum euismod sapien. Praesent semper ante vel mauris auctor, ut commodo ipsum malesuada. Morbi hendrerit tortor sapien. Nulla in hendrerit dui, eu accumsan est</p>
    </div>
</div>
<div id="content">

</div>

CSS：

#menu {
    position: fixed;
    top: 70px;
    bottom: 0px;
    left: 0;
    width: 200px;
    background-color: rgb(100, 134, 27);
    overflow-x: auto;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: rgb(27, 48, 0);
    min-width: 540px;
}

#menu-collapse{
    position: fixed;
    top: 50%;
    z-index: 1;
    background: red;
}

#content {
    position: fixed;
    top: 70px;
    right: 0px;
    bottom: 0px;
    left: 200px;
    background-color: rgb(27, 118, 0);
}

#some-block{
    position:absolute;
    display:inline;
    background-color: yellow;
    width: 200px;
    height: 2500px;

}

固定位置在父div的可见区域内

3 个答案: