# Header 具备 sticky 效果

- title_en : Header will be sticky when scrolling.
- order: 0

---

```js
<NukePlayGround>
  <Header style={{ backgroundColor: '#dddddd' }}>
    <Text>Sticky text</Text>
  </Header>
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ListView from 'nuke-list-view';
import Cell from 'nuke-cell';
import Header from 'nuke-header';

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: ['固定项1', '固定项2', '固定项3', '固定项4', '固定项5', '固定项6', '固定项7']
    };
  }
  render() {
    return (
      <ListView _autoWrapCell={false} showScrollbar={false} style={styles.listContainer}>
        <Header style={styles.header}>
          <View style={styles.dataHeaderItem}>
            <Text style={styles.headerText}>表头</Text>
          </View>
        </Header>
        {this.state.data.map((item, index) => {
          return (
            <Cell key={`cell_${index}`}>
              <View style={[styles.cellItem]}>
                <Text style={styles.text}>{item}</Text>
              </View>
            </Cell>
          );
        })}
      </ListView>
    );
  }
}
const styles = {
  listContainer: {
    flex: 1
  },
  header: {
    width: 750,
    backgroundColor: '#ff6600',
    height: 100,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    color: '#ffffff'
  },
  cellItem: {
    width: 750,
    height: 300,
    paddingTop: 20,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomStyle: 'solid',
    borderBottomColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#666666'
  }
};
render(<Demo />);
```