Giter VIP home page Giter VIP logo

scrolldir's Introduction

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

This software is maintained under a new repository located at yowainwright/scrolldir

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️


scrolldir banner

Leverage Vertical Scroll Direction with CSS 😎


Build Status CDNJS Greenkeeper npm version Bower version Share on Twitter


ScrollDir ⬆⬇

ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪

ScrollDir is perfect for:

  • showing or hiding sticky elements based on scroll direction 🐥
  • only changing its direction attribute when scrolled a significant amount 🔥
  • ignoring small scroll movements that cause unwanted jitters 😎

Usage

ScrollDir will set the data-scrolldir attribute on the <html> element to up or down:

<html data-scrolldir="up">

or

<html data-scrolldir="down">

Now it’s easy to change styles based on the direction the user is scrolling!

[data-scrolldir="down"] .my-fixed-header { display: none; }

In Action 🎥

Scrolldir gif


Install 📦

npm

npm install scrolldir --save

bower

bower install scrolldir --save

yarn

yarn add scrolldir

Setup 📤

Easy Mode

Add dist/scrolldir.auto.min.js and you’re done. There is nothing more to do! Scrolldir will just work.

Now go write some styles using [data-scrolldir="down"] and [data-scrolldir="up"].

Custom Mode 🛠

Add dist/scrolldir.min.js. You have access to the API options below and must invoke scrollDir.

scrollDir();

To use an attribute besides data-scrolldir:

scrollDir({ attribute: 'new-attribute-name' });

To add the Scrolldir attribute to a different element:

scrollDir({ el: 'your-new-selector' });

To turn Scrolldir off:

scrollDir({ off: true });

To turn provide a different scroll direction on page load (or app start):

scrollDir({ dir: 'up' }); // the default is 'down'

To change the thresholdPixels—the number of pixels to scroll before re-evaluating the direction:

scrollDir({ thresholdPixels: someNumber }); // the default is 64 pixels
// example: scrollDir({ thresholdPixels: 10 })

Example 🌴

This is a modular version of pwfisher's scroll-intent. If you'd like to use scrolldir with jQuery—use Scroll Intent. Scrolldir should work easily within any front-end framework so it ditches library dependencies. ~TY!

scrolldir's People

Contributors

datnordstrom avatar greenkeeper[bot] avatar jacefarm avatar jakiestfu avatar pvnr0082t avatar pwfisher avatar renovate[bot] avatar yowainwright avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scrolldir's Issues

An in-range update of node-qunit-phantomjs is breaking the build 🚨

The devDependency node-qunit-phantomjs was updated from 2.1.0 to 2.1.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

node-qunit-phantomjs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Commits

The new version differs by 2 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Browsers Supports

I have noticed on the major Desktop browsers it worked just fine, but on safari mobile seems to not work. Touch gestures supports will be just fine, i´m looking forward to.

Mistake in readme

Hi,

Firstly, thank you for the plugin, it works well 👍

I Noticed this mistake in the readme while using it :

scrollDir({ direction: 'up' }); // the default is 'down'

should be :

scrollDir({ dir: 'up' }); // the default is 'down'

Bye

features requests

Hi! thank you for your code. It would be great if this plugin also had the following features:

  • top/bottom detection

  • possibility to use classes instead of data attributes > so you can chain for ex. up.top. It can be useful on the following use case:

top: full menu
down: hamburger
up (:not(.top)): light menu

Yes it can easily be done manually with little external code, but it would be wanderful if implemented here :)

  • Some simple event to hook to get some scroll data.

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

  • Replaced the old Node.js version in your .nvmrc with the new one

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

  • engines was only updated if it defined a single version, not a range.
  • .nvmrc was updated to Node.js 10
  • .travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖


FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.29.0 to 1.29.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v1.29.1

2020-01-21

Bug Fixes

  • Avoid crashes for circular reexports when named exports cannot be found (#3350)

Pull Requests

Commits

The new version differs by 5 commits.

  • 21a1775 1.29.1
  • a49d951 Update changelog
  • e82410d Properly handle circular reexports (#3350)
  • 56cbbdc fix tpyo (#3335)
  • 63644db Remove : from test file names for Windows, update dependencies (#3342)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-import is breaking the build 🚨

Version 2.4.0 of eslint-plugin-import just got published.

Branch Build failing 🚨
Dependency eslint-plugin-import
Current Version 2.3.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details
  • continuous-integration/travis-ci/push The Travis CI build could not complete due to an error Details

Commits

The new version differs by 10 commits.

  • 44ca158 update utils changelog
  • a3728d7 bump eslint-module-utils to v2.1.0
  • 3e29169 bump v2.4.0
  • ea9c92c Merge pull request #737 from kevin940726/master
  • 8f9b403 fix typos, enforce type of array of strings in allow option
  • 95315e0 update CHANGELOG.md
  • 28e1623 eslint-module-utils: filePath in parserOptions (#840)
  • 2f690b4 update CI to build on Node 6+7 (#846)
  • 7d41745 write doc, add two more tests
  • dedfb11 add allow glob for rule no-unassigned-import, fix #671

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

An in-range update of babel7 is breaking the build 🚨

There have been updates to the babel7 monorepo:

    • The devDependency @babel/core was updated from 7.8.3 to 7.8.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build failed (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.14.2 to 1.14.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.14.3

2019-06-06

Bug Fixes

  • Generate correct external imports when importing from a directory that would be above the root of the current working directory (#2902)

Pull Requests

Commits

The new version differs by 4 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

el.setAttribute is not a function

Hi. I am trying to use scrolldir on specific element, but got an error

scrollDir({ el: 'scrolldirtest' }) or scrollDir({ el: '.scrolldirtest' })
[Vue warn]: Error in mounted hook: "TypeError: el.setAttribute is not a function"

Everything else is working fine.

An in-range update of rollup-plugin-babel is breaking the build 🚨


☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


The devDependency rollup-plugin-babel was updated from 4.3.3 to 4.4.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup-plugin-babel is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Commits

The new version differs by 2 commits.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

if scrolling down really slowly, data-scrolldir doesn't chage

This is quite a bad bug. Use case:

  1. scroll down
  2. scroll up (at this point data-scrolldir == up)
  3. scroll down again, very slowly

data-scrolldir will remain == up, even if I'm scrolling down until a certain point (very often 2-300px later, so very much).

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v1.9.3

2019-04-10

Bug Fixes

  • Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

  • #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)
Commits

The new version differs by 3 commits.

  • 516a06d 1.9.3
  • a5526ea Update changelog
  • c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

el is not a selector

Hi, not really a bug, but a 'bug' on your docs: the el option is not a selector. It's a dom element. You call setAttribute directly to it, so we in fact cannot pass a selector. So you can update your docs, or use querySelector to get the element and check it befor calling functions on it.

Start default up

How do I make it so it start in the data-scrolldir="up" at app start?

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.30.1 to 1.31.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • continuous-integration/travis-ci/push: The Travis CI build failed (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Quick question.

Please excuse my ignorance. I'm a designer learning to code. I was linked this library and it seems really rad! It's only focused on scroll direction though correct? It can't be used to trigger things on an anchor tag etc coming into view correct?

Wrong package name in the website

Hello! You have invalid package name in the demo. It's case sensitive. In npm registry is scrolldir and in the demo its scrollDir

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.