swa*_*ang 5 javascript css twitter-bootstrap
我想以类似于 stackoverflow 的“提问”页面右侧的“如何格式化”的方式使用 bootstrap 词缀。
.affix { top: 70px }我可以通过添加 css并在 html 中使用来使其附加到视口class='affix' data-spy='affix',但是如果我希望将附加元素固定到父元素怎么办?
例如,如果我有这样的html:
<div class='affix-container'>
<div class='left-panel'>
some form, including a textarea
</div>
<div class='right-panel affix' data-spy='affix'>
how to format
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我right-panel只想相对于 进行粘贴affix-container,因此当我向下滚动时,如果affix-container仍在视口中,则粘贴right-panel,否则right-panel向上滚动。
如果 affix-container 的大小可以调整,我还可以这样做吗?IE。它的大小/高度随着它包含的文本区域的大小的调整而增加?
如果您想跟踪左侧面板的滚动移动,则需要使用带有词缀的滚动间谍。您首先需要设置正文标签。
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
Run Code Online (Sandbox Code Playgroud)
这里的偏移量将确保跟踪仅从顶部开始 200,具体取决于标头大小等。然后右侧面板将获取 id="myScrollspy" 例如
<div class="hidden-xs col-sm-2" id="myScrollspy">
<div class="right-panel affix" data-spy="affix" data-offset-top="400">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
元素的固定固定在 400 偏移处(如果您有标题等,则很有用)。然后,当您从某个点向前滚动时,您可以使用 css 更改位置。我添加了来自代码摘录的内容,可以使用/忽略,即在 xs 屏幕上我隐藏了滚动间谍,否则它会占用父行中的 2 列。
.affix {
top: 100px;
}
Run Code Online (Sandbox Code Playgroud)
应该与可调整大小的容器一起使用,但我没有测试它。
| 归档时间: |
|
| 查看次数: |
929 次 |
| 最近记录: |