将页面元素固定在特定可视区域。组件中自带节流器（300ms）

基础用法

<template>
    <yb-affix :offset="58">
        <template v-slot>
            <el-button type="primary" size="mini">Affix top 58px</el-button>
        </template>
    </yb-affix>
</template>

显示 复制 复制

固定在滚动元素内

<template>
    <div style="overflow:auto;height:500px;position:relative;">
        <div style="height:2000px"></div>
        <yb-affix
            :offset="0"
            position="bottom"
            isClosestScrollTarget
            isShowBackground
        >
            <template v-slot>
                <el-button type="primary" size="mini">Affix bottom</el-button>
            </template>
        </yb-affix>
    </div>
</template>

显示 复制 复制

固定在目标容器

<template>
    <div class="affix-container">
        <yb-affix
            :offset="0"
            target=".affix-container"
            padding="20px 0 30px 0"
            isShowBackground
        >
            <template v-slot>
                <el-button type="primary" size="mini">Target</el-button>
            </template>
        </yb-affix>
        <!-- <yb-affix
            ref="affix"
            :offset="0"
            :target="getContainer"
            padding="20px 0 30px 0"
            isShowBackground
        >
            <template v-slot>
                <el-button type="primary" size="mini">Target</el-button>
            </template>
        </yb-affix> -->
    </div>
</template>
<script>
    export default {
        methods: {
            getContainer() {
                return this.$refs.affix.$el.parentElement;
            },
        },
    };
</script>
<style>
    .affix-container {
        text-align: center;
        height: 900px;
        border-radius: 4px;
        background: #ecf5ff;
        padding: 20px;
    }
</style>

显示 复制 复制

指定位置

<template>
    <yb-affix
        :offset="100"
        position="bottom"
        padding="20px 0 30px 0"
        isShowBackground
        :isFullBackground="false"
    >
        <el-button type="primary" size="mini">Affix bottom 100px</el-button>
    </yb-affix>
</template>

显示 复制 复制

最近滚动元素

• 元素的样式属性overflow、overflow-y的值设置为auto或scroll，将作为滚动元素

<template>
    <div class="affix-container">
        <yb-affix
            :offset="0"
            target=".affix-container"
            isShowBackground
            :isFullBackground="false"
            isClosestScrollTarget
        >
            <template v-slot>
                <el-button type="primary" size="mini" style="margin:10px 0">
                    Target
                </el-button>
            </template>
        </yb-affix>
        <div ref="height"></div>
    </div>
</template>
<script>
    export default {
        mounted() {
            setTimeout(() => {
                this.$refs.height.style.height = '1200px';
            }, 2000);
        },
    };
</script>
<style>
    .affix-container {
        text-align: center;
        height: 900px;
        border-radius: 4px;
        background: #ecf5ff;
        padding: 20px;
        overflow: auto; /**/
    }
</style>

显示 复制 复制

YbAffix Attributes

参数	说明	类型	可选值	默认值
offset	偏移距离	number	--	0
position	位置	string	'top' | 'bottom'	'top'
target	指定容器 (CSS 选择器)，函数使用方式详见指定容器	string | function(scrollEL){return dom}	--	--
z-index	设置时优先级最高。未设置时，取样式中的 zIndex，若样式未设置 zIndex，默认设置 100	number	--	--
isShowBackground	浮动时是否自动显示背景	boolean	--	false
isFullBackground	是否背景充满整个 target，在 isShowBackground 为 true 时生效	boolean	--	true
isClosestScrollTarget	是否将最近的可能滚动元素作为监听的滚动元素	boolean	--	false
padding	浮动时内边距（遵循 top right bottom left），在 is-full-background 为 true 时生效，设置后以设置的值为准，组件内部自动计算的 paddingLeft 和 paddingRight 将失效 , 也可以用占位符引用内部计算的 paddingLeft 和 paddingRight： '4px ${right} 4px ${left}'	string	--	--
background	浮动时背景，不设置则为透明，在 isShowBackground 为 true 时生效	string	--	'white'

YbAffix Scoped Slot

name	说明
default	自定义默认内容

YbAffix Methods

方法名称	说明
updatePosition	手动更新位置信息