摘要

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

JS部分

  相关技术栈: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实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)的更多相关文章

  1. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  3. Bootstrap -- 下拉菜单、输入框组、导航菜单

    Bootstrap -- 下拉菜单.输入框组.导航菜单 1. 下拉菜单 可以使用带有各种大小按钮的下拉菜单:.btn-lg..btn-sm 或 .btn-xs. 实现下拉菜单: <!DOCTYP ...

  4. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.

    Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏. Delphi中,除了应用程序主窗口会显示在任务栏上,其它窗口默认都不会显示在任务栏.没有MS开发环境中的ShowI ...

  5. Bootstrap历练实例:带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. DEDECMS v5.7 完美实现导航条下拉二级菜单

    一.引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二.实现过程 1.首先: 将下面这段代码贴到templets\def ...

  7. 鼠标移上显示的下拉菜单,和鼠标移上时显示的导航,html,JavaScript代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  9. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

随机推荐

  1. 目标检测中的选择性搜索-selective search-没弄

    https://blog.csdn.net/small_munich/article/details/79595257 https://www.cnblogs.com/zyly/p/9259392.h ...

  2. javascript的promise

  3. CGI "Internal Server Error"

    在安裝 CGI 程式時如果設定錯誤,便會看到 "500 Internal Server Error" 訊息,一般常見的錯誤可以用以下方法解決: 1. CGI 程式的權限需要設定為 ...

  4. Oracle客户端下载地址

    https://www.oracle.com/database/technologies/instant-client/downloads.html

  5. laravel5.2总结

    转自:http://www.cnblogs.com/redirect/p/6178001.html

  6. 比较SSO协议: WS-Fed, SAML, and OAuth

    真实比喻 在我们获得技术之前,让我们用完全非技术性的东西来解决这个问题.作为工程师,我们非常注重将事情分解为组件和流程.这有助于我们了解事情,以便我们可以排除故障或构建复杂的系统.当你去机场登机时,你 ...

  7. xcode出现the file couldn't be opened怎么解决

    右键——show In finder——显示xcode包内容——将有数字的删除——把有用的xcode双击

  8. macpro锁屏后没有进入睡眠

    使用命令pmset -g查看,如图,钉钉阻止了屏幕的睡眠,找了下钉钉的配置,也没有发现有关的内容,重启钉钉后问题解决 displaysleep 10 (display sleep prevented ...

  9. 【C#设计模式1】单例模式

    一.引言 最近在设计模式的一些内容,主要的参考书籍是<Head First 设计模式>,同时在学习过程中也查看了很多博客园中关于设计模式的一些文章的,在这里记录下我的一些学习笔记,一是为了 ...

  10. 在Electron运行的页面使用CSS的calc导致应用卡死

    这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: <el-table height="calc(100 ...