【问题标题】: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 既要滚动,又要在左侧完成时停止并在右侧滚动时向下...
      猜你喜欢
      • 1970-01-01
      • 2013-12-26
      • 1970-01-01
      • 1970-01-01
      • 2022-12-15
      • 1970-01-01
      • 2010-09-10
      • 1970-01-01
      • 2016-05-06
      相关资源
      最近更新 更多