Affix 固钉

将页面元素钉在可视范围。

使用场景

当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。

note

默认情况下，Affix 会采用 CSS sticky 定位，上层元素设置的 overflow=hidden/auto 可能导致定位不生效。此时可以设置 <Affix useJS /> 来启用 JavaScript 定位。

示例

基本示例

offsetTop={40}

吸附内容.111
吸附内容.222
吸附内容.333

noInline

const StyledDiv = styled.div` width: 100%; padding: 10px; font-size: 12px; background: var(--rex-colors-emphasis-10); `; function BalaBala({ text }) { return ( <StyledDiv> <p style={{ margin: 0, fontSize: 20 }}> <code>{text}</code> </p> 吸附内容.111 <br /> 吸附内容.222 <br /> 吸附内容.333 </StyledDiv> ); } function AffixDocExample() { return ( <div style={{ display: 'flex' }}> <div style={{ flex: '0 0 70%', background: '#f2f2f2', height: 400 }} /> <div style={{ flex: '0 0 30%', background: '#ffebeb' }}> <Affix offsetTop={40} style={{ zIndex: 1000 }}> <BalaBala text="offsetTop={40}" /> </Affix> </div> </div> ); } render(<AffixDocExample />)

const StyledDiv = styled.div`
  width: 100%;
  padding: 10px;
  font-size: 12px;
  background: var(--rex-colors-emphasis-10);
`;

function BalaBala({ text }) {
  return (
    <StyledDiv>
      <p style={{ margin: 0, fontSize: 20 }}>
        <code>{text}</code>
      </p>
      吸附内容.111
      <br />
      吸附内容.222
      <br />
      吸附内容.333
    </StyledDiv>
  );
}

function AffixDocExample() {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: '0 0 70%', background: '#f2f2f2', height: 400 }} />
      <div style={{ flex: '0 0 30%', background: '#ffebeb' }}>
        <Affix offsetTop={40} style={{ zIndex: 1000 }}>
          <BalaBala text="offsetTop={40}" />
        </Affix>
      </div>
    </div>
  );
}

render(<AffixDocExample />)

固定在底部

offsetBottom={20}

吸附内容.111
吸附内容.222
吸附内容.333

noInline

const StyledDiv = styled.div` width: 100%; padding: 10px; font-size: 12px; background: var(--rex-colors-emphasis-10); `; function BalaBala({ text }) { return ( <StyledDiv> <p style={{ margin: 0, fontSize: 20 }}> <code>{text}</code> </p> 吸附内容.111 <br /> 吸附内容.222 <br /> 吸附内容.333 </StyledDiv> ); } function AffixDocExample2() { return ( <div style={{ display: 'flex' }}> <div style={{ flex: '0 0 70%', background: '#f2f2f2', height: 400 }} /> <div style={{ flex: '0 0 30%', background: '#ffebeb', display: 'flex', alignItems: 'flex-end' }}> <Affix offsetBottom={20} style={{ zIndex: 1000 }}> <BalaBala text="offsetBottom={20}" /> </Affix> </div> </div> ); } render(<AffixDocExample2 />)

const StyledDiv = styled.div`
  width: 100%;
  padding: 10px;
  font-size: 12px;
  background: var(--rex-colors-emphasis-10);
`;

function BalaBala({ text }) {
  return (
    <StyledDiv>
      <p style={{ margin: 0, fontSize: 20 }}>
        <code>{text}</code>
      </p>
      吸附内容.111
      <br />
      吸附内容.222
      <br />
      吸附内容.333
    </StyledDiv>
  );
}

function AffixDocExample2() {
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: '0 0 70%', background: '#f2f2f2', height: 400 }} />
      <div style={{ flex: '0 0 30%', background: '#ffebeb', display: 'flex', alignItems: 'flex-end' }}>
        <Affix offsetBottom={20} style={{ zIndex: 1000 }}>
          <BalaBala text="offsetBottom={20}" />
        </Affix>
      </div>
    </div>
  );
}

render(<AffixDocExample2 />)

滚动容器用法

Affix 会自动找到元素的最近滚动容器，然后在该滚动容器内发生固定。

offsetTop={10}

吸附内容.111
吸附内容.222
吸附内容.333

noInline

const StyledDiv = styled.div` width: 100%; padding: 10px; font-size: 12px; background: var(--rex-colors-emphasis-10); `; function BalaBala({ text }) { return ( <StyledDiv> <p style={{ margin: 0, fontSize: 20 }}> <code>{text}</code> </p> 吸附内容.111 <br /> 吸附内容.222 <br /> 吸附内容.333 </StyledDiv> ); } function AffixDocExample3() { const jpg5050Repeat = 'url("https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg") 50% 50% repeat'; return ( <div> <div style={{ height: 400, overflow: 'auto' }}> <div style={{ height: 100, background: jpg5050Repeat }} /> <Affix offsetTop={10}> <BalaBala text="offsetTop={10}" /> </Affix> <div style={{ height: 1000, background: jpg5050Repeat }} /> </div> </div> ); } render(<AffixDocExample3 />)

const StyledDiv = styled.div`
  width: 100%;
  padding: 10px;
  font-size: 12px;
  background: var(--rex-colors-emphasis-10);
`;

function BalaBala({ text }) {
  return (
    <StyledDiv>
      <p style={{ margin: 0, fontSize: 20 }}>
        <code>{text}</code>
      </p>
      吸附内容.111
      <br />
      吸附内容.222
      <br />
      吸附内容.333
    </StyledDiv>
  );
}

function AffixDocExample3() {
  const jpg5050Repeat = 'url("https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg") 50% 50% repeat';

  return (
    <div>
      <div style={{ height: 400, overflow: 'auto' }}>
        <div style={{ height: 100, background: jpg5050Repeat }} />

        <Affix offsetTop={10}>
          <BalaBala text="offsetTop={10}" />
        </Affix>

        <div style={{ height: 1000, background: jpg5050Repeat }} />
      </div>
    </div>
  );
}

render(<AffixDocExample3 />)

API

字段	描述
offsetTop	number 指定吸附至滚动容器顶部的偏移量
offsetBottom	number 指定吸附至滚动容器底部的偏移量
useJS	boolean = false 是否启用 JS 进行定位
style	CSSProperties
className	string