captivationsoftware/react-sticky

[Feature Request] Add the ability to turn off on mobile

Closed this issue · 13 comments

First off, want to say thanks and love this!

Do you have any plans to create an option to disable sticky on mobile?

Thanks,

-Tim

I don't see this happening. You could achieve what you're asking for with something like:

render() {
    let Header = <header>...</header>;
    if (isMobile()) Header = <Sticky>{Header}</Sticky>; 
    return <StickyContainer>
        {Header}
    </StickyContainer> 
}

Thanks for the response.

Is this something you'd accept a PR for? Or do you not want to implement an on/off boolean?

I would absolutely consider a PR which introduces the ability to toggle/activate the sticky, provided its done in a generic way. Something along the lines of <Sticky isActive={true/false} />. What I'm against is any sort of check to detect if the sticky is being viewed within a mobile browser, or anything outside the scope of just "stickyness".

Thanks. I will get on it.

@timdoes @dbarbalato how use this feature? Maybe I don't know how dynamically update props for nested components, but i'm really stuck with this.

can you look at my code? https://gist.github.com/pytkin/1534c1e7ac85b332de354af76c5250a9

keyeh commented

@pytkin Try this for your render method:

  render() {
    const {
      pkg,
    } = this.context.metadata

    return (
      <GoogleAnalyticsTracker params={ this.props.params }>
        <Helmet
          meta={ [
            { property: "og:site_name", content: pkg.name },
            { name: "twitter:site", content: `@${ pkg.twitter }` },
          ] }
          link={ [
            { "rel": "icon", "href": favicon },
            { "rel": "dns-prefetch", "href": "//www.google-analytics.com" },
            { "rel": "preconnect", "href": "//pro.ip-api.com/json/" },
            { "rel": "preconnect", "href": "//soarsales.azurewebsites.net/sales/api/coverage/178.205.26.155/statemarketingmessage" },
          ] }
          script={ [
            { src: "//cdn.polyfill.io/v2/polyfill.min.js" },
          ] }
        />
        <StickyContainer>
          <Sticky isActive={ stickyMQ } style={ { zIndex: 2000 } }><Header /></Sticky>
          { this.props.children }
          <Footer />
        </StickyContainer>
      </GoogleAnalyticsTracker>
    )
  }
}

@timdoes did you find a solution for this? I have a responsive design, and when the media query for small applies, I want it to be not sticky.

I was thinking of using !important stylesheet to override with media query, what do you think?

I hate to use !important but this is working:

@media screen and (max-width: 736px) {
    .sidebar-wrap div div:first-child  {
        padding: 0 !important;
    }
    .sidebar-wrap div div:last-child  { /* this is .sidebar */
        position: static !important;
        transform: none !important;
        width: auto !important;
    }
}

My markup:

    <StickyContainer className="content">
         <div className="row">
             <div className="4u 12u(small) sidebar-wrap">
                 <Sticky className="sidebar">

@Noitidart i'm actually not remember. It was about year ago.

Try this: https://gist.github.com/pytkin/fb187e8fec7ba8c84f7ce40cc28d838d/7fc1ea244becd18824e98da1d0d8e82945fbebae (this is my code with @keyeh changes).

As I remember, "Stycky" adding class or styles to "style" attribute directly. You can try override it with !important and media-query - should works.

I'm actually not remember why we choose this solution (react-sticky), I think you can use react-bootstrap's navbar as alternative: https://react-bootstrap.github.io/components.html#navbars

@Noitidart, I think you can use onStickyStateChange to update stickyMQ from my example above.
Should be something like this: https://gist.github.com/pytkin/fb187e8fec7ba8c84f7ce40cc28d838d/b2f5663832fdb5aa545dcd5bb96f5c128454f0c4

But I can be wrong.

@Noitidart, I found repository with my project, you can use this workaround: https://gist.github.com/pytkin/20b579ecedac39cbbf7e9e38525bcf7d

Thank you very much @pytkin for all your feedback!

@Noitidart @pytkin
I created a PR #60 for this a while back adding the isActive prop to manually turn sticky on or off.

Hello, thanks for the lib.

Have you updated the readme or release file, cause I'm using the 6.0.3 version and I do not have isActive property option?

Thanks in advance.