React實現頂部固定滑動式導航欄（導航條下拉一定像素時顯示原導航欄樣式）

摘要

　　基於react的框架開發一個頂部固定滑動式的酷炫導航欄，當導航欄置頂時，導航欄沉浸在背景圖片里；當滑鼠滑動滾輪時，導航欄固定滑動並展示下拉樣式。

JS部分

　　相關技術棧：react、antd、react-router。詳細的技術棧應用請參考官方文檔的使用說明。

* 展示主頁App.jsx組件代碼

import React from 'react';
import './App.css';
import { Link, Route } from 'react-router-dom';
import { Layout } from 'antd';

//引入導航欄相對應的組件
import Home from './components/Home/Home';
import CoreTechnology from './components/Technology/Technology';
import Case from './components/Case/Case';
import About from './components/About/About';
import Join from './components/Join/Join';

const { Content } = Layout;

class App extends React.Component {

//在componentDidMount生命周期中添加window的handleScroll滑動監聽事件
componentDidMount() {
  window.addEventListener('scroll', this.handleScroll);
}

//定義handleScroll事件函數
handleScroll =(e)=>{
  var header = document.getElementById('header'); //定義一個dom節點為'header'的header變數
    if(window.pageYOffset >= 80){  //if語句判斷window頁面Y方向的位移是否大於或者等於導航欄的height像素值
      header.classList.add('header_bg');  //當Y方向位移大於80px時，定義的變數增加一個新的樣式'header_bg'
    } else {
      header.classList.remove('header_bg'); //否則就移除'header_bg'樣式
    }
}

  render() {
    return (
      <div className="page" id="page">
        <Layout>
          <div className="header" id="header"> //導航欄div
            <div className="brand">
              <Link to="/">
                <img src={require("./img/[email protected]")} alt="大可logo" width="" height="32"/>
              </Link>
            </div>
            <div className="nav">
              <ul>
                <li>
                  <Link to="/technology">
                    <img src={require("./img/dkgw_hxjs.png")} alt="核心技術" width="32" height="32"/>
                    核心技術
                  </Link>
                </li>
                <li>
                  <Link to="/case">
                    <img src={require("./img/dkgw_hyal.png")} alt="行業案例" width="32" height="32"/>
                    行業案例
                  </Link>
                </li>
                <li>
                  <Link to="/about">
                    <img src={require("./img/dkgw_gywm.png")} alt="關於DUCK" width="32" height="32"/>
                    關於DUCK
                  </Link>
                </li>
                <li>
                  <Link to="/join">
                    <img src={require("./img/dkgw_jrwm.png")} alt="加入我們" width="32" height="32"/>
                    加入我們
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          <Content className="content" id="content">
            <Route path="/" exact component={ Home }/>
            <Route path="/technology" component={ CoreTechnology }/>
            <Route path="/case" component={ Case }/>
            <Route path="/about" component={ About }/>
            <Route path="/join" component={ Join }/>
          </Content>
        </Layout>
      </div>
    );
  }
}

export default App;

CSS部分

　　為了讓導航欄置頂時懸浮在背景圖上，需要給導航欄置特定的css樣式。

    position: fixed;
    box-sizing: border-box; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
    z-index: 1000;

* 主頁App.css樣式代碼

@import '~antd/dist/antd.css'; //引入antd樣式
@import url('https://fonts.googleapis.com/css?family=Roboto'); //引入谷歌字體樣式

/* {通用樣式開始} */
* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* {通用樣式結束} */

/* {導航欄基礎樣式} */
.header
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 5rem;
    padding: 0 10vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
    z-index: 1000;
}

{/*{導航欄新樣式}*/}
.header.header_bg
{
    background: #607d8b;
}

.nav ul
{
    margin: 0;
    padding: 0;
    display: flex;
}

.nav ul li
{
    list-style: none;
}

.nav ul li a 
{
    color: #fff;
    padding: 0 20px;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
}

.brand a
{
    color: #fff;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
}

基本效果圖

導航欄置頂時：

導航欄下滑一定像素時：

最後

　　以上就是小編在實戰開發中的一個小分享，如有任何說的不對的地方，歡迎大家對我指指點點！