{"id":20638893,"url":"https://github.com/merri/boolean-state-throttle","last_synced_at":"2026-03-09T02:33:05.323Z","repository":{"id":75971436,"uuid":"39294729","full_name":"Merri/boolean-state-throttle","owner":"Merri","description":"Logic utility for use cases such as hiding a sticky header when scrolling down","archived":false,"fork":false,"pushed_at":"2015-07-18T13:11:04.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-18T02:21:20.604Z","etag":null,"topics":[],"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/Merri.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-07-18T10:27:47.000Z","updated_at":"2015-07-19T16:46:42.000Z","dependencies_parsed_at":"2023-02-24T12:40:52.704Z","dependency_job_id":null,"html_url":"https://github.com/Merri/boolean-state-throttle","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Fboolean-state-throttle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Fboolean-state-throttle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Fboolean-state-throttle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Fboolean-state-throttle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Merri","download_url":"https://codeload.github.com/Merri/boolean-state-throttle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242667531,"owners_count":20166311,"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-16T15:20:32.589Z","updated_at":"2026-03-09T02:33:05.273Z","avatar_url":"https://github.com/Merri.png","language":"HTML","readme":"# Boolean State Throttle\n\n[![Version](http://img.shields.io/npm/v/boolean-state-throttle.svg)](https://www.npmjs.org/package/boolean-state-throttle)\n\nYou may want to display a top bar header floating fixed on the screen. However on mobile space is limited and there can\nbe a need to hide the header when scrolling down and bringing it back when scrolling up. You might have already seen\nsolutions like [Headroom.js](https://github.com/WickyNilliams/headroom.js) or\n[sneakpeek](https://github.com/antris/sneakpeek). These often provide far more features than you may want to have,\nespecially if you are working with a framework such as React or maybe Angular. Boolean State Throttle handles the hard\nlogic for you, but doesn't provide full convenience in order to give more control to you. Due to this agnostic design\nyou can use whatever framework or library you want.\n\n## Usage samples\n\nBoolean state throttle is very convenient to use and gives you the power to handle exceptions!\n\n1. You provide it a callback that is only called when the state changes.\n2. You provide it a state boolean. This is the current display state of a header (or anything else).\n3. You provide it a value every time you get an event (`onscroll`).\n\nYou can link it with horizontal scrolling or vertical scrolling. Or maybe you have checkboxes and if 10 checkboxes are\nchecked within 1 second you want to display a message. Boolean State Throttle works for all time depending changes that\nare based on a numeric value.\n\n### Vanilla ES5 JavaScript sample\n\n[View demo](http://htmlpreview.github.io/?https://github.com/merri/boolean-state-throttle/blob/master/demo/index.html)\n\n```js\n(function() {\n    var headerElement = document.querySelector('header'),\n        notifyElement = document.getElementById('header-is-hidden')\n\n    // this is our boolean state, owned and controlled by this component\n    var isHidden = false\n\n    function getScrollY() {\n        return (window.pageYOffset !== undefined)\n            ? window.pageYOffset\n            : (document.documentElement || document.body.parentNode || document.body).scrollTop\n    }\n\n    // this function is only triggered when the boolean changes\n    // you could optimize render by using requestAnimationFrame; or simply use setState in React\n    function updateHeaderState(newState) {\n        isHidden = newState\n        notifyElement.className = headerElement.className = isHidden ? 'hidden' : ''\n    }\n\n    // convenience for you!\n    var headerStateTrigger = new BooleanStateThrottle(updateHeaderState)\n\n    function updateScrollValue() {\n        var y = getScrollY()\n        // one of the reasons to have the logic separate is that you can handle exceptions better!\n        if (isHidden \u0026\u0026 y \u003c 50) {\n            // header should always be shown when at the top\n            updateHeaderState(false)\n        } else {\n            // bombard the boolean state throttle\n            headerStateTrigger(isHidden, y)\n        }\n    }\n\n    window.addEventListener('scroll', updateScrollValue, false)\n})()\n```\n\n### ReactJS sample\n\nCode below only has the core logic for displaying and hiding a header; the actual render is up to you.\n\n```jsx\nvar Component = React.createClass({\n/* ... */\n    getInitialState: function() {\n        return {\n            isHeaderHidden: false\n        }\n    },\n\n    componentDidMount: function() {\n        this.headerStateTrigger = new BooleanStateThrottle(this.updateHeaderState)\n        window.addEventListener('scroll', this.updateScrollValue)\n    },\n\n    componentWillUnmount: function() {\n        window.removeEventListener('scroll', this.updateScrollValue)\n    },\n\n    updateHeaderState: function(isHeaderHidden) {\n        this.setState({ isHeaderHidden: isHeaderHidden })\n    },\n\n    updateScrollValue: function() {\n        var y = (window.pageYOffset !== undefined)\n            ? window.pageYOffset\n            : (document.documentElement || document.body.parentNode || document.body).scrollTop\n\n        if (this.state.isHeaderHidden \u0026\u0026 y \u003c 50) {\n            // header should always be shown when at the top\n            this.updateHeaderState(false)\n        } else {\n            // bombard the boolean state throttle\n            this.headerStateTrigger(this.state.isHeaderHidden, y)\n        }\n    }\n/* ... */\n})\n```\n\n## Customizing\n\n`BooleanStateThrottle` takes two arguments: `callback` function (required) and `options` object (optional).\n\n```js\n// values shown are the defaults\nvar options = {\n    // time in ms after which changes are checked for\n    interval: 200,\n    // how much value can change down until `false` state is triggered\n    falseTolerance: 150,\n    // how much value can change up until `false` state is triggered\n    trueTolerance: 150,\n    // tells the initial value\n    initialValue: 0\n}\n```\n\n## Compatibility\n\nThis utility is compatible with probably everything since Internet Explorer 5 or so.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Fboolean-state-throttle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerri%2Fboolean-state-throttle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Fboolean-state-throttle/lists"}