CSS - 如何不滚动页面的一部分？ [关闭]答案

【问题标题】：CSS - how not to scroll parts of the page? [closed]CSS - 如何不滚动页面的一部分？ [关闭]
【发布时间】：2014-07-03 13:18:46
【问题描述】：

我看到一些网站部分滚动，例如页面分为 2 column.main 和左侧。 main 比左边长，当通过结束左边滚动页面时它会停止但 main 也会滚动。怎么可能？

【问题讨论】：

我认为你需要使用position: fixed。阅读更多关于它的信息here。
你可以用 Parallax 来做，这里有一个示例：codepen.io/amustill/pen/aoFIm

标签： javascript css scroll

【解决方案1】：

以下是流行的 Web 框架中“粘性侧边栏”的几种实现：

这种模式通常是通过在达到滚动阈值时将元素位置从static 切换到fixed 来实现的。

这里有一个很棒的教程：http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

【讨论】：

【解决方案2】：

使用position:fixed;这将使它固定在一个位置并且从不滚动

【讨论】：

【解决方案3】：

您可以使用position:fixed。

使用示例

我们有两列：左列和右列。他们是div。这将是我们的 HTML。

<div id="left">
    Non-scrollable content
</div>
<div id="right">
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
    Scrollable content<br>
</div>

现在我们将为它们设置样式。

div{
    /* Following properties are applied to both columns */
    display:inline-block;
    /* default for divs is display:block what makes it display one under another, while we want them to display one beside another */
    width:50%;
    /* each column now has the half-screen width */
    color:white;
    /* we set text color to white ... */
    font-size:30px;
    /* ... and its size to 30 pixels */
}
#left{
    /* These properties are for the left column */
    background-color:green;
    /* background of left column is now green */
    position:fixed;
    /*its position is fixed, non scrollable */
    height:100px;
    /* doesn't really matter, but I want its height to be 100 pixels */
}
#right{
    /* These properties are for the right column */
    background-color:red;
    /* background of right column is now red */
    position:absolute;
    /* we want it to be scrollable, so its position need to be absolute */
    right:0px;
    /* its indent from right side is now 0 pixels */
}

它会是什么样子？ Let's see!

【讨论】：

在Your中，左边是固定的，直到右边结束滚动，然后左右滚动。但是 id 既要滚动，又要在左侧完成时停止并在右侧滚动时向下...