Question

我想使用bootstrap词缀，类似于stackoverflow的提问题页面右侧的“如何格式化”。

我可以通过在html中添加css .affix { top: 70px }并使用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>

我希望right-panel仅相对于affix-container加贴，所以当我向下滚动时，如果affix-container仍然在视口中，则加贴right-panel，否则让right-panel向上滚动。

如果affix-container可以调整大小，我还可以这样做吗？即。它的大小/高度随着它包含的textarea的大小而增加？

Answer 1

如果要跟踪左侧面板的滚动动作，则需要使用带有词缀的滚动间谍。你首先需要身体标签设置。

<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">

这里的偏移量将确保跟踪仅从头顶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>

元素的固定固定为400偏移（如果您有标题等，则非常有用）。然后，当您从某个点向前滚动时，可以使用css更改位置。我添加了来自我的代码提取的东西，可以使用/忽略，即在xs屏幕上我隐藏了我的scrollspy，否则它占用了父行中的2个col。

.affix {
   top: 100px;
 }

应该使用可调整大小的容器，但我没有测试它。

bootstrap如何将其修复为父元素

1 个答案: