{"id":19514857,"url":"https://github.com/ndp/fixie","last_synced_at":"2025-04-26T06:30:40.339Z","repository":{"id":7724818,"uuid":"9090844","full_name":"ndp/fixie","owner":"ndp","description":"Typescript library to fix elements vertically as the page scrolls down. Configurable, reusable.","archived":false,"fork":false,"pushed_at":"2023-03-06T07:21:21.000Z","size":74,"stargazers_count":11,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-25T12:03:17.734Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ndp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2013-03-29T02:31:12.000Z","updated_at":"2024-11-05T12:50:18.000Z","dependencies_parsed_at":"2024-11-10T23:38:07.958Z","dependency_job_id":"ef805c4a-00da-4592-b9c2-622617d9a07c","html_url":"https://github.com/ndp/fixie","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"b17a4b4c84a1bba0c4f0ea13cf02e98a876ad6e8"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndp%2Ffixie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndp%2Ffixie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndp%2Ffixie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndp%2Ffixie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndp","download_url":"https://codeload.github.com/ndp/fixie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250943897,"owners_count":21511648,"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":[],"created_at":"2024-11-10T23:37:51.222Z","updated_at":"2025-04-26T06:30:39.908Z","avatar_url":"https://github.com/ndp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"fixie\n=====\n\nFix elements vertically as the page scrolls down. Configurable, reusable.\n\"Pin\" the given element to the top of the page on vertical scroll. Also know as\n\"conditional fixed placement\".\n\nNo dependencies. Useful if you're not using React or something like that.\n\nThe main feature is that this supports different strategies. All the code\nI saw took a single approach, and it may not work for your markup or page length. \nThis tool allows you to try different techniques, or event switch in \ndifferent situations.\n\nIf you're looking for the jQuery plugin, use an earlier, \u003c 2.0 version.\nThe current one does not require jQuery. (There's no reason it won't work \nat the same time, though.) \n\nIf you want jQuery (or some other feature), let me \nknow. I think I'm the only one using this, so I am not implementing backward\ncompatibility unless asked.\n\n### Demo\n```shell\n\u003e git clone ...\n\u003e yarn install\n\u003e open demo.html\n```\n\nhttp://ndpsoftware.com/fixie/demo.html\n\n## Usage\n\n### Webpack or similar\n\n```\n\u003e yarn add fixiejs\n```\n\n```js\n  // my-file.js\n  import { fixie } from 'fixiejs'\n  const el = document.getElementById(...) or $('#menu')[0]\n  fixie(el);   // use defaults\n  fixie(el, { topMargin: '20px' }); // see Options below\n```\n\n### Direct inclusion on web pages\n\nThis is not recommended, but if you want, `dist/fixie.min.js` can be\ndirectly included on a web page. Just grab it, similar to how the demo page does.\n\n### Options\nAccepts an options object, which may contain (with `defaults`):\n* strategy: `fixed`  Choose an implementation. See below.\n* topMargin: `0` Specifies how close to the top to pin the element.\n  Usually you want elements pinned to the top, but sometimes they need to\n  be below some other element, such as a fixed header.\n* pinnedClass: `_pinnedToTop` Any css class to add on to the element when it is pinned.\n* pinnedBodyClass: `undefined` A CSS class to add to the body element when\n  this element is pinned. Default is to add no class.\n* throttle: `30` (ms)  How often to adjust position of element\n* pinSlop: `0` Usually when the user scrolls an element to the top\n  of the page, it becomes \"fixed\". This \"slop\" value allows it to go past,\n  or become fixed before it's actually at the top.\n\n\n### Strategies\nThere are various strategies available:\n* `relative`: simply make the element positioned relative and\n  adjust position whenever the user scrolls. Works with simple elements\n* `relativeWithHiding`: same as above, except fades out and shows\n  elements as they move\n* `fixed`: makes the element fixed positioned. This is very performant, but\n  it has a couple drawbacks. First, you must take care that when the element\n  becomes \"fixed\", that it maintains its natural width. This is better done\n  with your CSS than fixie itself, so that the pinned element can respond\n  well to browser resizing. Often this is only a \"width: 100%\" statement.\n\n\n### Development\n\nUses minimal tooling. See `package.json` for relevant stuff. \n\n**Rollup** is used to build minified web-ready file, but otherwise not needed.\n\n\n## License\nCopyright (c) 2013-2021 NDP Software. Andrew J. Peterson\nMIT License; see LICENSE.txt\n\n\n## History\n* 2021-07-29 Convert to Typescript\n* Bug fix: `relativeWithHiding` strategy resets opacity to `inherit` after element is made visible, so that fixed items can have any opacity applied with CSS.\n* 1.0.1: add bower file\n* 1.0.0: first release\n\n## References\n* http://github.com/ndp/jsutils for tests\n* http://www.gregjopa.com/2011/07/conditional-fixed-positioning-with-jquery/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndp%2Ffixie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndp%2Ffixie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndp%2Ffixie/lists"}