{"id":27498321,"url":"https://github.com/ng-milk/angular-sticky-navigation-directive","last_synced_at":"2025-04-17T08:31:41.927Z","repository":{"id":57179168,"uuid":"42445378","full_name":"ng-milk/angular-sticky-navigation-directive","owner":"ng-milk","description":"Angular directive to make a sticky element, quick demo here: http://ng-milk.github.io/angular-sticky-navigation-directive/","archived":false,"fork":false,"pushed_at":"2017-06-08T10:55:24.000Z","size":22,"stargazers_count":20,"open_issues_count":1,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-28T09:03:22.854Z","etag":null,"topics":["angularjs","javascript","navigation"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/ng-milk.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":"2015-09-14T11:45:54.000Z","updated_at":"2018-06-19T16:40:59.000Z","dependencies_parsed_at":"2022-09-09T19:01:32.169Z","dependency_job_id":null,"html_url":"https://github.com/ng-milk/angular-sticky-navigation-directive","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-milk%2Fangular-sticky-navigation-directive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-milk%2Fangular-sticky-navigation-directive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-milk%2Fangular-sticky-navigation-directive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-milk%2Fangular-sticky-navigation-directive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ng-milk","download_url":"https://codeload.github.com/ng-milk/angular-sticky-navigation-directive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249052334,"owners_count":21204983,"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":["angularjs","javascript","navigation"],"created_at":"2025-04-17T08:31:41.306Z","updated_at":"2025-04-17T08:31:41.910Z","avatar_url":"https://github.com/ng-milk.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular sticky navigation directive\n![Angular sticky navigation directive demo](http://cdn.makeagif.com/media/9-14-2015/D7S9Ra.gif)\n\n\n### [Quick Demo](http://ng-milk.github.io/angular-sticky-navigation-directive/)\nAngular directive to make a sticky element, read about it on [here](https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/).\nIt will add a `ng-sticky-fixed` class whenever your navigation is not visible on the viewport (therefore it will make it visible \u0026 sticky).\nIt's up to you to style the class properly, see the example for more.\n\n\n## Usage\n1. Include `ng-sticky.js`.\n2. Add `dm.stickyNav` as a dependency to your app.\n3. Profit!\n\n\n## Bower\nInstallable via `bower`:\n\n```bash\nbower install ng-sticky\n```\n\n## Example\nSee [index.html](https://github.com/ng-milk/angular-sticky-navigation-directive/blob/master/index.html) for an example.\n\n```html\n\u003cscript\u003e\n  angular.module('app', ['dm.stickyNav']);\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  .ng-sticky-fixed{\n    background-color:rgba(0, 0, 0, 0.1);\n    bottom:0;\n    left:0;\n    padding:10px 15px;\n    position:fixed;\n    top:auto;\n    width:100%;\n  }\n\u003c/style\u003e\n\n\u003carticle ng-app=\"app\"\u003e\n  \u003csection sticky-nav\u003e\n    \u003cbutton class=\"btn btn-primary\"\u003eReview\u003c/button\u003e\n    \u003cbutton class=\"btn btn-danger\"\u003eDelete\u003c/button\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    [...] Lots of text\n  \u003c/section\u003e\n\u003c/article\u003e\n```\n\n## Custom sticky class\nBy default `ng-sticky-fixed` will be appended to the element's class. By providing a value to the `sticky-nav` attribute you can use any other class:\n\n```html\n[...]\n\u003cstyle\u003e\n  .custom-class{\n    /* ... */\n  }\n\u003c/style\u003e\n\n\u003carticle ng-app=\"app\"\u003e\n  \u003csection sticky-nav=\"custom-class\"\u003e\n    [...]\n  \u003c/section\u003e\n  [...]\n\u003c/article\u003e\n```\n## Additional directive attributes\nBy default, the directive will attempt a 100 milliseconds $timeout call to wait for the DOM to load. You can provide different values for retrying until DOM is ready using `max-tries` and `ms-retry-delay`:\n\n```html\n\u003cdiv sticky-nav=\"custom-class\" max-tries=\"5\" ms-retry-delay=\"200\"/\u003e\n```\nWhen you don't want to use the height of your sticky element as part of the threshold for applying the sticky class, you can add the `ignore-element-size` directive attribute. It is useful for 'tall' elements like sidebars or side menus.\n\n```html\n\u003cdiv sticky-nav=\"custom-class\" ignore-element-size/\u003e\n```\n\n## About ngmilk\n\u003cimg src=\"http://ngmilk.rocks/content/images/2014/10/111-1.jpg\" width=\"200px\"/\u003e\n\n**ngmilk** is the place to go for fresh front-end articles, with a focus on AngularJS.\nSee more on [ngmilk.rocks](https://ngmilk.rocks)\n\nFollow [@ngmilkrocks](http://twitter.com/ngmilkrocks) on Twitter to stay ahead of the game.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng-milk%2Fangular-sticky-navigation-directive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fng-milk%2Fangular-sticky-navigation-directive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng-milk%2Fangular-sticky-navigation-directive/lists"}