码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-26 23:24:07      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:back   核心   增加   基础   package   z-index   path   特定   显示   

摘要

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

HTML部分

  相关技术栈:reactantdreact-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/dkgw_logo@01.png")} 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; }

 

基本效果图

导航栏置顶时:

技术图片

导航栏下滑一定像素时:

技术图片

最后

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

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

标签:back   核心   增加   基础   package   z-index   path   特定   显示   

原文地址:https://www.cnblogs.com/BlueBerryCode/p/11745825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!