Fixed top
viewportの上部に要素を配置します。(追加でCSSを必要となる場合があります)
vue
<template>
<b-div fixed="top">
fixed-top
</b-div>
</template>
Fixed bottom
viewportの下部に要素を配置します。(追加でCSSを必要となる場合があります)
vue
<template>
<b-div position="fixed-bottom">
...
</b-div>
</template>
Sticky top
スクロールした後, 要素をviewportの上部に配置します。
sticky-top
はCSSの position:sticky
を使用しますが、これはすべてのブラウザーで完全にサポートされているわけではありません。
vue
<template>
<b-div sticky="top">
...
</b-div>
</template>
Responsive sticky top
レスポンシブなバリエーションは sticky-top
の下記を参考にしてください。
vue
<template>
<b-div sticky="sm-top">
Stick to the top on viewports sized SM (small) or wider
</b-div>
<b-div sticky="md-top">
Stick to the top on viewports sized MD (medium) or wider
</b-div>
<b-div sticky="lg-top">
Stick to the top on viewports sized LG (large) or wider
</b-div>
<b-div sticky="xl-top">
Stick to the top on viewports sized XL (extra-large) or wider
</b-div>
</template>