diff --git a/package.json b/package.json
index c8322a102b..ba0f61881d 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "jsonp": "^0.2.0",
     "lesshint": "^1.2.1",
     "lodash": "^4.1.0",
+    "lodash.debounce": "^4.0.6",
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
     "ramda": "^0.21.0",
@@ -123,7 +124,7 @@
     "eslint-fix": "eslint --fix components test site scripts ./*.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md",
     "test": "npm run lint && npm run dist && npm run jest",
     "jest": "jest",
-    "pre-pub":"node ./scripts/prepub",
+    "prepub": "node ./scripts/prepub",
     "pub": "antd-tools run pub",
     "beta": "antd-tools run beta",
     "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt"
diff --git a/site/component/Header/index.jsx b/site/component/Header/index.jsx
index 9b6571a02b..c0eed78224 100644
--- a/site/component/Header/index.jsx
+++ b/site/component/Header/index.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router';
 import enquire from 'enquire.js';
+import debounce from 'lodash.debounce';
+import classNames from 'classnames';
 import { Select, Menu, Row, Col, Icon } from 'antd';
 const Option = Select.Option;
 
@@ -18,10 +20,21 @@ export default class Header extends React.Component {
     this.state = {
       menuVisible: false,
       menuMode: 'horizontal',
+      isFirstFrame: true,
     };
   }
 
   componentDidMount() {
+    window.addEventListener('scroll', debounce(() => {
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const clientHeight = document.documentElement.clientHeight;
+      if (scrollTop >= clientHeight) {
+        this.setState({ isFirstFrame: false });
+      } else {
+        this.setState({ isFirstFrame: true });
+      }
+    }, 100));
+
     document.addEventListener('click', () => {
       this.setState({
         menuVisible: false,
@@ -77,8 +90,13 @@ export default class Header extends React.Component {
       display: this.state.menuVisible ? 'block' : '',
     };
 
+    const headerClassName = classNames({
+      clearfix: true,
+      'home-nav-white': !this.state.isFirstFrame,
+    });
+
     return (
-      <header id="header" className="clearfix">
+      <header id="header" className={headerClassName}>
         <Row>
           <Col lg={4} md={6} sm={7} xs={24}>
             <Icon
diff --git a/site/component/Home/index.jsx b/site/component/Home/index.jsx
index 44a888e57e..6e10643d53 100644
--- a/site/component/Home/index.jsx
+++ b/site/component/Home/index.jsx
@@ -44,6 +44,16 @@ export default class Home extends React.Component {
       #header .ant-menu {
         background: transparent;
       }
+      #header.home-nav-white {
+        background: rgba(255, 255, 255, 0.9);
+        border-bottom-color: #EBEDEE;
+      }
+      .home-nav-white #search-box {
+        border-left-color: #EBEDEE;
+      }
+      .home-nav-white #nav a {
+        color: #666;
+      }
       #nav a {
         color: #eee;
         transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);