代码之家 › 专栏 › 技术社区 › Wessel Visser

将侧边栏粘贴到顶部?

affix sidebar twitter-bootstrap css html

Wessel Visser · 技术社区 · 10 年前

我正在为我的网站制作一个侧边栏,并希望使用词缀。问题是,当我向下滚动时,它会激活固定在顶部的侧边栏,而不会停留在他的位置上。

这是我的侧边栏:

<aside class="aside-affix" data-spy="affix" data-offset-top="120" id="affix">
    <p>Dit is een pagina met alle projecten. Deze tekst verschijnt in de sidebar aan de rechterkant.</p>
    <p>Donec at elementum odio. Vestibulum eleifend turpis diam. Phasellus id ante pharetra, cursus purus venenatis, tempus lacus. Curabitur a eleifend lorem. Pellentesque erat justo, ultrices quis mi id, feugiat imperdiet sapien. Ut aliquet orci urna, convallis fringilla risus pharetra ut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et congue velit. Vivamus eget lectus arcu. Donec eu porttitor erat. Suspendisse potenti. Vestibulum dignissim leo luctus nibh egestas, nec blandit tortor feugiat. Praesent at ornare velit. Aliquam gravida metus velit, in pellentesque mi iaculis sed. Ut rutrum semper elementum.</p>
</aside>

1 回复 | 直到 10 年前

Andre Morgan 10 年前

根据您的评论,看起来您已经解决了部分问题,现在正在尝试找出相对于页脚的底部位置。Bootstrap的词缀插件切换类.satt top、.satt和.satt bottom(为每个类场景提供CSS)。要使.sattack bottom场景正常工作,您需要使用data offset bottom=“”属性在元素上设置适当的底部偏移配置,因为您使用了属性路由进行初始化。

<aside class="aside-affix" data-spy="affix" data-offset-top="120" data-offset-bottom="600" id="affix">

在这种情况下,您希望该属性的值为页脚的高度+页脚和附加元素之间的300px间隙。希望这有帮助。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前