{"id":21430069,"url":"https://github.com/luuk-dev/scrollwithme","last_synced_at":"2025-03-16T21:44:44.675Z","repository":{"id":172305861,"uuid":"444048740","full_name":"Luuk-Dev/ScrollWithMe","owner":"Luuk-Dev","description":"Let an element easily scroll with the user","archived":false,"fork":false,"pushed_at":"2022-01-03T12:24:11.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T08:19:24.291Z","etag":null,"topics":["effects","framework","front-end","frontend","html","javascript","javascript-framework","javascript-library","js","library","scroll","scrolling"],"latest_commit_sha":null,"homepage":"","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/Luuk-Dev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-03T12:13:10.000Z","updated_at":"2022-01-03T12:25:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"0dc21e1d-0738-441d-891e-52946976cb7f","html_url":"https://github.com/Luuk-Dev/ScrollWithMe","commit_stats":null,"previous_names":["luuk-dev/scrollwithme"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luuk-Dev%2FScrollWithMe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luuk-Dev%2FScrollWithMe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luuk-Dev%2FScrollWithMe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Luuk-Dev%2FScrollWithMe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Luuk-Dev","download_url":"https://codeload.github.com/Luuk-Dev/ScrollWithMe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243940062,"owners_count":20372044,"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":["effects","framework","front-end","frontend","html","javascript","javascript-framework","javascript-library","js","library","scroll","scrolling"],"created_at":"2024-11-22T22:20:30.180Z","updated_at":"2025-03-16T21:44:44.649Z","avatar_url":"https://github.com/Luuk-Dev.png","language":"JavaScript","readme":"# ScrollWithMe\nLet an element easily scroll with the user.\n\n\u003e Written by Luuk Walstra\n\u003e \n\u003e Discord: Luuk#8524\n\u003e \n\u003e Github: [https://github.com/Luuk-Dev](https://github.com/Luuk-Dev)\n\u003e \n\u003e Replit: [https://replit.com/@LuukDev](https://replit.com/@LuukDev)\n\u003e \n\u003e Repository: [https://github.com/Luuk-Dev/ScrollWithMe](https://github.com/Luuk-Dev/ScrollWithMe)\n\n## How to use\nYou need to call the ScrollWithMe class in your JavaScript. The class has two parameters. The first one is the element where you want to add the ScrollWithMe effect. This can be the element itself or a string to get the element. The second parameter is the custom options. This is an object with the following options:\n\n- startAt: From which height (in pixels) the element should scroll with the user. Default is `0`.\n- endAt: From which height (in pixels) the element should stop scrolling with the user. Default is `Infinity`.\n- setTop: How far away the element should be away from the top (in pixels).\n- callback: An object with callbacks which should get fired at some point.\n   - onscroll: Gets fired when the element starts scrolling with the user.\n   - onend: Gets fired when the element stops scrolling with the user.\n\n## Demo\nWatch a live demo [here](https://scrollwithme.luukdev.repl.co)\n\n## Example\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width\"\u003e\n    \u003ctitle\u003eScrollWithMe\u003c/title\u003e\n    \u003cstyle type=\"text/css\"\u003e\n    html, body{\n      margin: 0;\n      padding: 0;\n      font-family: Arial;\n      height: 300vh;\n    }\n    .huts{\n      top: 0;\n      height: 100vh;\n      background-color: blue;\n      width: auto;\n      padding: 10px;\n    }\n    .scroll-with-me{\n      position: absolute;\n      top: 400px;\n      width: 300px;\n      height: 250px;\n      left: 50px;\n      background-color: red;\n      padding: 20px;\n    }\n    \u003c/style\u003e\n    \u003cscript src=\"https://scrollwithme.luukdev.repl.co/ScrollWithMe.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"huts\"\u003e\n      \u003ch2\u003eSome text over here\u003c/h2\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"scroll-with-me\"\u003e\n      \u003ch2 id=\"some-text\"\u003eI can scroll with you!\u003c/h2\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    (() =\u003e {\n      const el = document.querySelector(`.scroll-with-me`);\n      const sometext = el.querySelector(`#some-text`);\n      new ScrollWithMe(el, {\n        startAt: 300,\n        endAt: 900,\n        setTop: 100,\n        callback: {\n          onscroll: () =\u003e {\n            sometext.innerHTML = `WOW! I am scrolling with you!`;\n          },\n          onend: () =\u003e {\n            sometext.innerHTML = `I can scroll with you!`;\n          }\n        }\n      });\n    })();\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluuk-dev%2Fscrollwithme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluuk-dev%2Fscrollwithme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluuk-dev%2Fscrollwithme/lists"}