CSS - 如何不滚动页面的部分？

Question

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

Answer 1

流行的Web框架中的“粘性侧边栏”的几个实现：

• Bootstrap's Affix
• Foundation's Magellan

此模式通常通过在元素位置达到滚动阈值时将其从static切换为fixed来实现。

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

Answer 2

使用position:fixed;这将使其固定在一个位置，永不滚动

Answer 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!