导航定位

下载代码

html

css

分享到微信朋友圈

html

css

* {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  color: #000;
}

.header {
  background-color: #fff;
  height: 90px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.nav {
  width: 90vw;
  margin: 0 5vw;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
}
.nav__list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
          flex: 1;
}

.section {
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left bottom, right top, from(#a8c0ff), to(#3f2b96));
  background: linear-gradient(to right top, #a8c0ff, #3f2b96);
}
.section--project {
  background: -webkit-gradient(linear, left bottom, right top, from(#ee9ca7), to(#ffdde1));
  background: linear-gradient(to right top, #ee9ca7, #ffdde1);
}
.section--info {
  background: -webkit-gradient(linear, left bottom, right top, from(#009FFF), to(#ec2F4B));
  background: linear-gradient(to right top, #009FFF, #ec2F4B);
}

.title {
  font-size: 35px;
}
.title--header {
  font-size: 18px;
  -webkit-box-flex: 1;
          flex: 1;
}

.rect {
  position: absolute;
  z-index: -1;
  background: -webkit-gradient(linear, left bottom, right top, from(#a8c0ff), to(#3f2b96));
  background: linear-gradient(to right top, #a8c0ff, #3f2b96);
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
  -webkit-transform: scale(2);
          transform: scale(2);
}

JavaScript

'use strict';

const rect = document.querySelector('.rect');
const sections = document.querySelectorAll('.section');
const gradient = [
	"linear-gradient(to right top, #a8c0ff, #3f2b96)",
	"linear-gradient(to right top, #ee9ca7, #ffdde1)",
	"linear-gradient(to right top, #009FFF, #ec2F4B)"
]
const options = {
	threshold: 0.7
}

let observer =  new IntersectionObserver(navCheck, options);

sections.forEach((section) => {
	observer.observe(section);
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg