vue-fixed-scroll-break

A wrapper component to make an element fixed and stop it from scrolling past a certain point.

Installation

npm install vue-fixed-scroll-break

Usage

<VueFixedScrollBreak>
    My content
</VueFixedScrollBreak>

Props

Name	Type	Required	Default	Description
`topOfStopElement`	Number	Yes	-	The offset from the top of the stop element to stop scrolling.
`totalOffset`	Number	No	80	An additional distance from the `topStopElement` to stop scrolling.

Example

This example is a vuetify button to go to top of page. The button will stop scrolling when it reaches the footer.

The property topOfStopElement is calculated from the offset of the footer element. Using a ref in the footer is a simple and straightforward way to calculate it using this.$refs.Footer.$el.offsetTop.

<template>
    <VueFixedScrollBreak
        :top-of-stop-element="offset"
        :total-offset="100"
        >
        <v-btn
            ref="toTop"
            class="mx-2"
            fab
            >
            <v-icon dark> mdi-arrow-up </v-icon>
        </v-btn>
    </VueFixedScrollBreak>
    <div ref="Footer">
        My footer
    </div>
</template>

<script>
import 'VueFixedScrollBreak' from 'vue-fixed-scroll-break'

export default {
    name: 'MyGoToTopButton'
    components: {
        VueFixedScrollBreak
    },
    data() {
        return {
            offset: this.$refs.Footer.$el.offsetTop;
        }
    },
}
</script>

In this case the button will stop scrolling when it reaches 100px from the top of the footer.

💡 In this example the footer is in the same component as the button. If this were not the case, it would still be possible to access it through this.$root.$children.