{"id":17036029,"url":"https://github.com/phucbm/jquery-scroll-direction-plugin","last_synced_at":"2025-04-12T13:14:12.680Z","repository":{"id":44553500,"uuid":"318935678","full_name":"phucbm/jquery-scroll-direction-plugin","owner":"phucbm","description":"↕️ A lightweight jQuery plugin to detect scroll direction.","archived":false,"fork":false,"pushed_at":"2022-02-15T11:04:16.000Z","size":55,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T13:14:08.234Z","etag":null,"topics":["jquery","locomotive-scroll","scroll","scroll-direction","scrolling"],"latest_commit_sha":null,"homepage":"https://scroll-direction.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phucbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-06T02:40:55.000Z","updated_at":"2024-09-04T12:43:23.000Z","dependencies_parsed_at":"2022-07-20T20:18:46.811Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/jquery-scroll-direction-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fjquery-scroll-direction-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fjquery-scroll-direction-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fjquery-scroll-direction-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fjquery-scroll-direction-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/jquery-scroll-direction-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571839,"owners_count":21126522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","locomotive-scroll","scroll","scroll-direction","scrolling"],"created_at":"2024-10-14T08:48:58.092Z","updated_at":"2025-04-12T13:14:12.661Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \u003cimg width=\"100px\" src=\"https://raw.githubusercontent.com/phucbm/scroll-direction/main/logo.svg\" align=\"center\" alt=\"Scroll Direction\" /\u003e\n \u003ch1 align=\"center\"\u003eScroll Direction\u003c/h1\u003e\n \u003cp align=\"center\"\u003eA lightweight Javascript plugin to detect scroll direction on your website.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://github.com/phucbm/https://badgen.net/github/release/phucbm/jquery-scroll-direction-plugin/?cache=600/releases/latest\"\u003e\n   \u003cimg src=\"https://badgen.net/github/release/phucbm/jquery-scroll-direction-plugin/?cache=600/?cache=600\"\u003e\n   \u003c/a\u003e\n    \u003ca href=\"https://www.jsdelivr.com/package/gh/phucbm/jquery-scroll-direction-plugin\"\u003e\n   \u003cimg src=\"https://data.jsdelivr.com/v1/package/gh/phucbm/jquery-scroll-direction-plugin/badge?style=rounded\"\u003e\n   \u003c/a\u003e\n\u003cspan\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg\" alt=\"made-in-vietnam\"\u003e\n\u003c/span\u003e\n \u003c/div\u003e\n\n\u003e **Update**: Scroll Direction now works with other libraries that hijack the native scrollbar (like Locomotive Scroll).\n\n## Getting started\n\n### Self-hosting\n\nYou\ncan [download the plugin directly from Github](https://raw.githubusercontent.com/phucbm/jquery-scroll-direction-plugin/main/jquery.scroll-direction.js)\n.\n\n```html\n\n\u003cscript src=\"/jquery.scroll-direction.js\"\u003e\u003c/script\u003e\n```\n\n### Using CDN\n\nYou can also browse for the latest version by\nvisiting [Scroll Direction on jsDelivr](https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin/)\n\n```html\n\u003c!-- Scroll Direction - v2.0.0 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@2.0.0/jquery.scroll-direction.js\"\u003e\u003c/script\u003e\n```\n\nor minified version\n\n```html\n\u003c!-- Scroll Direction - v2.0.0 --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/phucbm/jquery-scroll-direction-plugin@2.0.0/jquery.scroll-direction.min.js\"\u003e\u003c/script\u003e\n```\n\n### Initialize Scroll Direction\n\nAfter init, you will have some classes on your body tag to indicate the scroll direction and position.\n\n```js\n// jQuery\n$.scrollDirection.init();\n\n// Pure JS\nwindow.scrollDirection.init();\n```\n\n```html\n\n\u003cbody class=\"scroll-top scroll-up\"\u003e\u003c/body\u003e\n```\n\n### Integrate with Locomotive\n\nSet the `hijacking:true` so the plugin will let you use custom event to calculate scrolling info.\n\n```js\n// init Locomotive\nlet scroller = new LocomotiveScroll();\n\n// init Scroll Direction\n$.scrollDirection.init({\n    hijacking: true\n});\n\n// update Scroll Direction on Locomotive scroll event\nscroller.on('scroll', function(obj){\n    $.scrollDirection.update({\n        scrollAmount: () =\u003e obj.scroll.y,\n        maxScrollAmount: () =\u003e obj.limit.y,\n    });\n});\n```\n\n## Usage\n\n### Init\n\n```js\n$.scrollDirection.init({\n    // options\n});\n```\n\n|Option|Type|Default|Description|\n|---|---|---|---|\n|`topOffset`|function return `number`|`() =\u003e 0`|Height of top zone in pixel.|\n|`bottomOffset`|function return `number`|`() =\u003e 0`|Height of bottom zone in pixel.|\n|`atBottomIsAtMiddle`|`boolean`|`true`|Consider bottom zone is also middle zone.|\n|`indicator`|`boolean`|`true`|Turn indicator on/off.|\n|`indicatorElement`|`jQuery element`|`$(\"body\")`|Add indicator classes to this element.|\n|`scrollUpClass`|`string`|`\"scroll-up\"`|Class when scrolling up.|\n|`scrollDownClass`|`string`|`\"scroll-down\"`|Class when scrolling down.|\n|`scrollAtTopClass`|`string`|`\"scroll-top\"`|Class when at top zone.|\n|`scrollAtMiddleClass`|`string`|`\"scroll-middle\"`|Class when at middle zone.|\n|`scrollAtBottomClass`|`string`|`\"scroll-bottom\"`|Class when at bottom zone.|\n|`extraIndicators`|`object`|`{\"element\": $(\"#element\"),\"class\": \"element-is-viewed\",}`|Add a class to indicatorElement when scroll pass the element|\n|`scrollAmount`|function return `number`|`() =\u003e $(window).scrollTop()`|The instance scroll amount of window.|\n|`maxScrollAmount`|function return `number`|`() =\u003e $(document).height() - $(window).height()`|Maximum scroll amount.|\n|`hijacking`|`boolean`|`false`|Disable update on window scroll event to use custom event.|\n\n### Update\n\n```js\n// jQuery\n$.scrollDirection.update({\n    // update new options\n});\n\n// Pure JS\nwindow.scrollDirection.update({\n    // update new options\n});\n```\n\n### Events\n\n```js\n// jQuery\n// this event runs whenever you load, resize and scroll\n$(window).on(\"scrollDirection\", function(){\n    // do your job here\n});\n\n// when you scroll up\n$(window).on(\"scrollUp\", function(){\n});\n\n// when you scroll down\n$(window).on(\"scrollDown\", function(){\n});\n\n// when you at the beginning of the page, you can increase the top zone using topOffset\n$(window).on(\"scrollAtTop\", function(){\n});\n\n// when you in the middle of the page \n// this means the top and bottom zone are not visible in view port\n$(window).on(\"scrollAtMiddle\", function(){\n});\n\n// when you touch the end of the page\n$(window).on(\"scrollAtBottom\", function(){\n});\n\n// Pure JS\ndocument.addEventListener(\"scrollDirection\", () =\u003e {\n});\n```\n\n### APIs\n\nYou can also check the current scroll direction/position using these provided APIs.\n\n- `$.scrollDirection.isScrollUp`\n- `$.scrollDirection.isScrollDown`\n- `$.scrollDirection.isScrollAtTop`\n- `$.scrollDirection.isScrollAtMiddle`\n- `$.scrollDirection.isScrollAtBottom`\n\n```js\n// jQuery\nif($.scrollDirection.isScrollUp){\n    // do something\n}\n\n// Pure JS\nif(window.scrollDirection.isScrollUp){\n    // do something\n}\n```\n\n## Deployment\n\n### Install\n\n```shell\nnpm install\n```\n\n### Dev server\n\n```shell\ngulp serve\n```\n\n### Release\n\n```shell\ngulp release\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fjquery-scroll-direction-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fjquery-scroll-direction-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fjquery-scroll-direction-plugin/lists"}