Hide your header until you need it

Related tags

react-headroom
Overview
Issues
  • Weird glitch when scrolling

    Weird glitch when scrolling

    Hi, I'm using your last version react-headroom (2.2.4) and I see a little glitch:

    test-headroom

    The image shows, in some way, what happens: the content inside header, a navbar, disappears when I'm scrolling and appears again for some microseconds. I'm using like you explain in your doc.

    Do you know the reason? Thanks

    opened by timhecker 20
  • allow scrolling props.parent instead of on window only

    allow scrolling props.parent instead of on window only

    usefull for https://github.com/seatgeek/react-infinite/ related to https://github.com/seatgeek/react-infinite/pull/47

    opened by borisnadion 17
  • Safari scroll bouncing causes white space to appear

    Safari scroll bouncing causes white space to appear

    When scrolling too fast or too much to the top of the page in desktop Safari, it shows an extra white space as is expected, but that locks the header out of place, as can be seen in the image below (notice the highlighted element is actually below the highlight).

    Does anyone knows a way to fix this? Seems related to #89.

    image

    Edit: just saw that #90 aimed to fix this but it still happens to me on 3.1.0

    opened by matheusgrieger 12
  • Change initial state class to 'headroom headroom--unfixed'

    Change initial state class to 'headroom headroom--unfixed'

    This causes the initial class name to be correctly set to headroom--unfixed. Its needed mainly for when pinStart is greater than 0.

    fixes #45

    opened by tzvigqb 11
  • Support optional sticky subheader

    Support optional sticky subheader

    This is a cool pattern I saw on producthunt.com

    Both headers showing

    screen shot 2015-03-02 at 7 52 20 am

    Only the subheader is now showing

    screen shot 2015-03-02 at 7 52 27 am

    opened by KyleAMathews 7
  • feat: add pin property

    feat: add pin property

    Implements issues #4, although I named the property pin instead of fixed since everything related is named like that.

    opened by lunsdorf 7
  • feature: add

    feature: add "fixed" prop so can set to always be on

    though this would be an odd name as only fixed=true makes sense as there's already a disable prop.

    Or perhaps name it alwaysFixed...

    opened by KyleAMathews 6
  • Set transition animations styles from props + add a custom html tag

    Set transition animations styles from props + add a custom html tag

    Hey @KyleAMathews ,

    I added a couple props to the Headroom component:

    • speed : Transition speed, in ms. Type: number, Default: 350
    • easing: Transition function. Type: string, Default: ease-in-out
    • zIndex: the z-index of inner component. Will be applied in innerStyle. Default: 10
    • tag: html tag of the outer component. Type: string, Default: div

    It's nothing game changing, but allows to adjust the animation without using style, e.g.:

    <Headroom speed={500} easing="ease-in-out">
      <h1>You can put anything you'd like inside the Headroom Component</h1>
    </Headroom>
    

    I would be interested to hearing your opinion for this.

    enhancement 
    opened by janczizikow 6
  • Convert code to ES6/JSX

    Convert code to ES6/JSX

    As discussed in #57

    I can't figured out how to make the demo site work.

    ~~ReactHotAPI is not a function so I probably drop react-hot-loader and use babel plugin transform react instead~~

    ~~Another thing is dropping objectAssign as I can see that babel included the polyfill be default.~~

    opened by thangngoc89 6
  • bump shallowequal

    bump shallowequal

    Since version 0.2.2 shallowequal size went from 3.4kB to 561B. Also fixes #148

    opened by plesiecki 6
  • I changed onUnfix to onFix

    I changed onUnfix to onFix

    I changed onUnfix to onFix

    opened by sinafath 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 2.2.1 to 2.2.2

    Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.7.1 to 2.8.9

    Bump hosted-git-info from 2.7.1 to 2.8.9

    Bumps hosted-git-info from 2.7.1 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.4 to 4.17.21

    Bump lodash from 4.17.4 to 4.17.21

    Bumps lodash from 4.17.4 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Manual 'reset'

    Manual 'reset'

    I've used the disableInlineStyle prop and then my own set of callbacks to add and remove props (and hence styles through data-hidden=true).

    This means I've been able to implement a 'pinned' state via a separate button. Unfortunately, when I unpin, I need to scroll up then down before headroom retriggers the unpin callback.

    It would be great to have a way to manually 'reset' Headroom.

    opened by wrightjamie 0
  • Bump ini from 1.3.5 to 1.3.7

    Bump ini from 1.3.5 to 1.3.7

    Bumps ini from 1.3.5 to 1.3.7.

    Commits
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump js-yaml from 3.11.0 to 3.14.0

    Bump js-yaml from 3.11.0 to 3.14.0

    Bumps js-yaml from 3.11.0 to 3.14.0.

    Changelog

    Sourced from js-yaml's changelog.

    [3.14.0] - 2020-05-22

    Changed

    • Support safe/loadAll(input, options) variant of call.
    • CI: drop outdated nodejs versions.
    • Dev deps bump.

    Fixed

    • Quote = in plain scalars #519.
    • Check the node type for !<?> tag in case user manually specifies it.
    • Verify that there are no null-bytes in input.
    • Fix wrong quote position when writing condensed flow, #526.

    [3.13.1] - 2019-04-05

    Security

    • Fix possible code execution in (already unsafe) .load(), #480.

    [3.13.0] - 2019-03-20

    Security

    • Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

    [3.12.2] - 2019-02-26

    Fixed

    • Fix noArrayIndent option for root level, #468.

    [3.12.1] - 2019-01-05

    Added

    • Added noArrayIndent option, #432.

    [3.12.0] - 2018-06-02

    Changed

    • Support arrow functions without a block statement, #421.
    Commits
    • 34e5072 3.14.0 released
    • 7b25c83 Browser files rebuild
    • 6f73473 Dev deps bump
    • 0c29349 Travis-CI: drop old nodejs versions
    • 10be97e fix(loader): Add support for safe/loadAll(input, options)
    • d6983dd Fix issue #526: wrong quote position writing condensed flow (#527)
    • 93fbf7d fix issue 526 (wrong quote position writing condensed flow)
    • e569cc7 readme: update titelift info
    • 8fb2905 changelog format update
    • 33c2236 Verify that there are no null-bytes in input
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump fstream from 1.0.11 to 1.0.12

    Bump fstream from 1.0.11 to 1.0.12

    Bumps fstream from 1.0.11 to 1.0.12.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Glitch in safari mobile

    Glitch in safari mobile

    I saw that this was an issue back in 2018-2019 but the exact same issue is happing for me now (using gatsby).

    The issue back then https://github.com/KyleAMathews/react-headroom/issues/154

    Is anyone else experiencing this?

    opened by mhedengren 8
Releases(v3.2.0)
  • v3.2.0(Oct 10, 2021)

  • v3.1.1(Mar 30, 2021)

  • v3.1.0(Dec 3, 2020)

  • v3.0.1(Nov 25, 2020)

    • Fix issue with errors when parent no longer existed when calling componentWillUnmount #184
    • Fix peer dependency warnings for react^17 #187
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 21, 2016)

    A new major release to fix #45

    The initial class for the header used to be the same as when it was later pinned after scrolling down then up. https://github.com/KyleAMathews/react-headroom/pull/65 fixes this so it starts at react-headroom-unfixed and returns to that when at or above pinStart.

    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Nov 27, 2015)

    @cbeckfield added a PR for upgrading this module for React 0.14, thanks!

    @borisnadion also added a PR for selecting other elements (other than the window) as the parent for the headroom e.g. an element with overflow.

    Source code(tar.gz)
    Source code(zip)
Sticky component for awesome React apps

react-sticky Make your React components sticky! Update No longer actively maintained: The 6.0.3 release is the last release maintained. This means we

Captivation Software 2.5k Oct 16, 2021
A performant and comprehensive React sticky component.

react-stickynode A performant and comprehensive React sticky component. A sticky component wraps a sticky target and keeps the target in the viewport

Yahoo 945 Oct 14, 2021