gpt4 book ai didi

javascript - bootstrap affix 如何将其固定到父元素

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:41:10 26 4
gpt4 key购买 nike

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

我可以通过添加 css .affix { top: 70px } 并使用 class='affix' data-spy='affix' 使其附加到视口(viewport)在 html 中,但是如果我想将词缀元素固定到父元素怎么办?

例如,如果我有这样的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 是可调整大小的,我还能这样做吗? IE。它的大小/高度随着它包含的文本区域的大小而增加?

最佳答案

如果你想跟踪左面板的滚动移动,你需要使用带有词缀的滚动 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 偏移处(如果您有标题等则很有用)。然后,当您从某个点向前滚动时,您可以使用 css 更改位置。我已经添加了来 self 的代码提取物并且可以使用/忽略的东西,即在 xs 屏幕上我隐藏了我的 scrollspy,否则它在父行中占用 2 列。

.affix {
top: 100px;
}

应该可以与可调整大小的容器一起使用,但我没有测试它。

关于javascript - bootstrap affix 如何将其固定到父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38947633/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com