How to use @times-components/sticky - 5 common examples

]};
`;

// This is to avoid transition styles being server side rendered which we
// do not need. They'll be quite large and are unnecessary on initial render
function SaveShareContainerWrapper(props) {
  return (
     }
      server={() => }
    />
  );
}

const StyledKeylineItem = styled(ArticleKeylineItem)`
  ${selectors.containsSticky(css`
    border-bottom-color: transparent;
  `)};
`;

const shouldBeSticky = mediaQuery(`(max-width: ${breakpoints.huge}px)`);

function StickySaveAndShareBar(props) {
  return (
    
      
        
      

function SaveShareContainerWrapper(props) {
  return (
     }
      server={() => }
    />
  );
}

const StyledKeylineItem = styled(ArticleKeylineItem)`
  ${selectors.containsSticky(css`
    border-bottom-color: transparent;
  `)};
`;

const shouldBeSticky = mediaQuery(`(max-width: ${breakpoints.huge}px)`);

function StickySaveAndShareBar(props) {
  return (
    
      
        
      
    
  );
}

export default StickySaveAndShareBar;

${props =>
    props.isClient && [
      selectors.sizer(css`
        border-bottom: 1px solid transparent;
        will-change: border-bottom-color;
      `),
      selectors.sticky(css`
        will-change: height, box-shadow;
      `),
      computeProgressStyles(
        progress => css`
          height: ${60 - progress * 10}px;
          box-shadow: 0 2px 5px 0 ${rgba(0, 0, 0, 0.2 * progress)};

          ${selectors.stickySizer(css`
            border-bottom-color: ${rgba(
              colours.functional.keyline,
              Math.max(0, 1 - 2 * progress)
            )};

${props =>
    props.isClient && [
      selectors.sizer(css`
        border-bottom: 1px solid transparent;
        will-change: border-bottom-color;
      `),
      selectors.sticky(css`
        will-change: height, box-shadow;
      `),
      computeProgressStyles(
        progress => css`
          height: ${60 - progress * 10}px;
          box-shadow: 0 2px 5px 0 ${rgba(0, 0, 0, 0.2 * progress)};

          ${selectors.stickySizer(css`
            border-bottom-color: ${rgba(
              colours.functional.keyline,
              Math.max(0, 1 - 2 * progress)
            )};
          `)};
        `
      )
    ]};

progress => css`
          height: ${60 - progress * 10}px;
          box-shadow: 0 2px 5px 0 ${rgba(0, 0, 0, 0.2 * progress)};

          ${selectors.stickySizer(css`
            border-bottom-color: ${rgba(
              colours.functional.keyline,
              Math.max(0, 1 - 2 * progress)
            )};
          `)};
        `
      )