html实现向下滑动后出现导航条,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

• 

  核心技术

• 

  行业案例

• 

  关于duck

• 

  加入我们

);

}

}

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;

}

基本效果图

导航栏置顶时：

导航栏下滑一定像素时：

最后

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