React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

摘要

　　基于react的框架开发一个顶部固定滑动式的酷炫导航栏，当导航栏置顶时，导航栏沉浸在背景图片里；当鼠标滑动滚轮时，导航栏固定滑动并展示下拉样式。

js部分

　　相关技术栈：、、。详细的技术栈应用请参考官方文档的使用说明。

* 展示主页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/[e-mail]")} 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;
}

 

基本效果图

导航栏置顶时：

导航栏下滑一定像素时：

最后

　　以上就是小编在实战开发中的一个小分享，如有任何说的不对的地方，欢迎大家对我指指点点！