https://github.com/heimrichhannot/scroll-toggle

Simple javascript plugin to toggle elements on scroll.
https://github.com/heimrichhannot/scroll-toggle

Last synced: about 1 month ago
JSON representation

Simple javascript plugin to toggle elements on scroll.

• Host: GitHub
• URL: https://github.com/heimrichhannot/scroll-toggle
• Owner: heimrichhannot
• Created: 2018-10-29T14:50:58.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-06T15:00:14.000Z (almost 6 years ago)
• Last Synced: 2024-09-14T04:24:53.540Z (3 months ago)
• Language: JavaScript
• Size: 295 KB
• Stars: 0
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Scroll-Toggle

Simple javascript plugin to toggle elements on scroll. The styling to hide and show elements must be done by yourself.

![demo](https://raw.githubusercontent.com/heimrichhannot/scroll-toggle/master/docs/assets/scroll-toggle-demo.gif "Scroll Toggle Demo")

## Usage

Require the plugin itself.

`require('ScrollToggle');`

By default the plugin listens on elements with the `.scroll-toggle` css class.

```





```


In order to hide elements, you can use the following scss snippet and customize for your needs:

```

.scroll-toggle {

  transition: transform 250ms linear;

  transform: translateY(0);

  &.scroll-hide {

    transform: translateY(100%);

  }

}

```

## Additional Attributes

| Attributes  | Description  |

|---|---|

| data-offset | Set a minimum offset to start hide element (body scrollTop), can also be an valid CSS-Selector like `#header` |

| data-body-class | Define a custom CSS class that should be toggled on body element on hide/show element. |

| data-init-show | Set to false if you want to hide the element initially, if offset is below body scrollTop on load. |