javascript - 引导词缀如何将其修复到父元素

我想使用引导附加词，类似于stackoverflow的询问页面右侧的“如何格式化”。

我可以通过添加css .affix { top: 70px }并在html中使用class='affix' data-spy='affix'使其附加到视口(viewport)，但是如果我希望将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仍在视口(viewport)中，则粘贴right-panel，否则让right-panel向上滚动。

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

最佳答案

如果要跟踪左面板的滚动运动，则需要在后缀上使用滚动 spy 。您首先需要设置body标签。

<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偏移量(如果您有 header 等，则很有用)。然后，当您从某个点向前滚动时，可以使用css更改位置。我添加了来自代码提取的内容，可以使用/忽略它们，即在xs屏幕上隐藏了scrollspy，否则它将在父行中占用2个列。

.affix {
   top: 100px;
 }

应该与可调整大小的容器一起使用，但是我没有对其进行测试。

Affix

javascript - 引导词缀如何将其修复到父元素