vue-fixed-scroll-break

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

https://github.com/evamart/vue-fixed-scroll-break

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • CITATION.cff file
    Found CITATION.cff file
  • codemeta.json file
    Found codemeta.json file
  • .zenodo.json file
    Found .zenodo.json file
  • DOI references
  • Academic publication links
  • Committers with academic emails
  • Institutional organization owner
  • JOSS paper metadata
  • Scientific vocabulary similarity
    Low similarity (7.4%) to scientific vocabulary

Keywords

npm vue
Last synced: 8 months ago · JSON representation ·

Repository

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

Basic Info
Statistics
  • Stars: 0
  • Watchers: 1
  • Forks: 0
  • Open Issues: 4
  • Releases: 1
Topics
npm vue
Created over 2 years ago · Last pushed over 1 year ago
Metadata Files
Readme License Citation

README.md

vue-fixed-scroll-break

Vue.js

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

Installation

bash npm install vue-fixed-scroll-break

Usage

html <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.

```html

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

:bulb: 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.

Citation (CITATION.cff)

cff-version: 1.2.0
message: If you use this software, please cite it as below.
title: vue-fixed-scroll-break
version: 1.0.0
authors:
  - name: emarti2
    email: eva.martin@bsc.es
keywords: []
license: Other
repository-code: https://github.com/EvaMart/vue-fixed-scroll-break
url: https://www.npmjs.com/package/vue-fixed-scroll-break
references: []

GitHub Events

Total
Last Year

Committers

Last synced: 10 months ago

All Time
  • Total Commits: 17
  • Total Committers: 2
  • Avg Commits per committer: 8.5
  • Development Distribution Score (DDS): 0.118
Past Year
  • Commits: 2
  • Committers: 1
  • Avg Commits per committer: 2.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
emarti2 e****n@b****s 15
Metadata Updater for FAIRsoft o****h@b****s 2
Committer Domains (Top 20 + Academic)
bsc.es: 2

Issues and Pull Requests

Last synced: 10 months ago

All Time
  • Total issues: 0
  • Total pull requests: 6
  • Average time to close issues: N/A
  • Average time to close pull requests: less than a minute
  • Total issue authors: 0
  • Total pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 2
  • Bot issues: 0
  • Bot pull requests: 6
Past Year
  • Issues: 0
  • Pull requests: 6
  • Average time to close issues: N/A
  • Average time to close pull requests: less than a minute
  • Issue authors: 0
  • Pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 2
  • Bot issues: 0
  • Bot pull requests: 6
Top Authors
Issue Authors
Pull Request Authors
  • metadata-updater-for-fairsoft[bot] (12)
Top Labels
Issue Labels
Pull Request Labels

Dependencies

package-lock.json npm
  • 108 dependencies
package.json npm
  • minimist ^1.2.0 development
  • rollup ^1.14.4 development
  • rollup-plugin-buble ^0.19.6 development
  • rollup-plugin-commonjs ^9.3.4 development
  • rollup-plugin-replace ^2.2.0 development
  • rollup-plugin-uglify-es 0.0.1 development
  • rollup-plugin-vue ^4.7.2 development
  • vue-template-compiler ^2.6.10 development
  • vue ^2.6.10