场景： 页面滚动距离超过banner的高度就header就悬浮
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="./images/favicon.ico" />
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/home.css">
<title>惠萌</title>
</head>
<body>
<div class="main">
<header class="normal">
<div class="layout">
<div class="logo">
<img src="./images/img_index_logo1@2x.png" alt="">
</div>
<div class="navbar">
<ul class="navbar-list">
<li class="navbar-item active">
<a href="./home.html">走进惠萌</a>
<ul class="navbar-menu">
<li class="navbar-menu-item">
<a href="./brandStory.html">品牌故事</a>
</li>
<li class="navbar-menu-item">
<a href="./developmentCourse.html">发展历程</a>
</li>
<li class="navbar-menu-item">
<a href="./companyCulture.html">企业文化</a>
</li>
<li class="navbar-menu-item">
<a href="./teacherTeam.html">教研团队</a>
</li>
</ul>
</li>
<li class="navbar-item">
<a href="./companyNews.html">新闻动态</a>
</li>
<li class="navbar-item">
<a href="./teachingRoom.html">教学展厅</a>
</li>
<li class="navbar-item">
<a href="./campusTour.html">校园巡礼</a>
</li>
<li class="navbar-item">
<a href="./careerOpportunity.html">事业机会</a>
</li>
<li class="navbar-item">
<a href="./contactUs.html">联系我们</a>
</li>
</ul>
</div>
</div>
</header>
<div class="banner">
<div class="layout">
<div class="cont">
<p class="title">惠赋未来<span class="dian">·</span>萌播幸福</p>
<p class="subtitle">Creating the future<span class="dian"></span>Growing with happiness</p>
</div>
</div>
<p class="logo"></p>
</div>
<div id="gotop"></div>
<footer></footer>
</div>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/common.js"></script>
<script>
$(function () {
$(window).scroll(function () {
let height = $('.banner').height();
let scrollTop = $(window).scrollTop();
if (scrollTop > height) {
$('header').addClass('view');
$('header').removeClass('normal');
} else {
$('header').addClass('normal');
$('header').removeClass('view');
}
});
});
</script>
</body>
</html>
javascript
// 滚动距离超过banner的高度就header就悬浮
$(function () {
$(window).scroll(function () {
let height = $('.banner').height();
let scrollTop = $(window).scrollTop();
if (scrollTop > height) {
$('header').addClass('view');
$('header').removeClass('normal');
} else {
$('header').addClass('normal');
$('header').removeClass('view');
}
});
});
css
.main{
padding:0 0 314px;
}
header {
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
transform: translate(0,0);
}
header .layout {
display: flex;
justify-content: space-between;
}
.logo img {
width: 100%;
height: 100%;
}
.navbar-list {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.navbar-item {
width: 126px;
height: 100%;
text-align: center;
line-height: 48px;
font-size: 18px;
font-family: 'PingFangSC-Medium';
padding-bottom: 4px;
margin-right: 17px;
opacity: 0.7;
cursor: pointer;
}
.navbar-item >a {
color: #fbfbfb;
}
.navbar-item.active {
font-size: 20px;
opacity: 1;
position: relative;
}
.navbar-item.active>a{
color: #fbfbfb;
}
.navbar-item.active::after {
content: '';
width: 72px;
height: 2px;
background: #fbfbfb;
position: absolute;
bottom: 6px;
left: 50%;
transform: translate(-50%, 0);
}
.navbar-item:hover {
opacity: 1;
position: relative;
}
.navbar-item:hover>a{
color: #fbfbfb;
}
.navbar-menu {
width: 100%;
position: absolute;
top: 52px;
left: 0;
padding-top: 10px;
display: none;
}
.navbar-item:hover .navbar-menu {
display: block;
}
.navbar-menu-item {
width: 100%;
height: 48px;
background: #fbfbfb;
text-align: center;
line-height: 48px;
font-size: 16px;
}
.navbar-menu-item > a {
color: #333;
}
.navbar-menu-item.active {
background: #FFE5D0;
}
.navbar-menu-item.active >a{
color: #FF7100;
}
.normal .logo {
width: 265px;
height: 54px;
margin-top: 19px;
transition: 0.2s all ease-in;
}
.normal .navbar {
width: 914px;
height: 52px;
background-image: linear-gradient(90deg, #FFBD19 0%, #E98024 31%, #CF1778 60%, #7A2B80 100%);
border-radius: 26px;
margin-top: 24px;
transition: 0.2s all ease-in;
}
.view {
background: #fff;
}
.view .logo {
width: 232px;
height: 48px;
margin-top: 16px;
transition: 0.2s all ease-in;
}
.view .navbar {
height: 100%;
background: #fff;
margin: 0;
border-radius: 0;
transition: 0.2s all ease-in;
}
.view .navbar-item {
line-height: 52px;
padding: 14px 0;
}
.view .navbar-item > a{
color: #333;
}
.view .navbar-item.active >a {
color: #FF7100;
}
.view .navbar-item:hover >a {
color: #FF7100;
}
.view .navbar-item.active:hover > a{
color: #FF7100;
}
.view .navbar-item.active::after {
content: '';
width: 72px;
height: 4px;
background: #FF7100;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
border-radius: 2px;
}
.view .navbar-menu {
top: 80px;
padding: 0;
}
/* banner */
.banner {
height: 1080px;
background: url('../images/bg_index@2x.png') no-repeat top center;
background-size: cover;
position: relative;
}
.banner .layout {
padding-top: 445px;
}
.banner .cont {
width: 100%;
height: 100%;
position: relative;
}
.banner .title {
height: 72px;
line-height: 72px;
text-align: left;
font-size: 72px;
font-family: 'PingFangSC-Regular';
color: #fff;
margin-bottom: 29px;
}
.banner .title .dian {
margin: 0 6px 0 7px;
}
.banner .subtitle {
height: 32px;
line-height: 32px;
text-align: left;
font-size: 32px;
font-family: 'PingFangSC-Regular';
color: #fff;
}
.banner .subtitle .dian {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
margin: 0 8px;
}
.banner .logo {
width: 122px;
height: 136px;
background: url('../images/img_index_logo2@2x.png') no-repeat center/100%;
position: absolute;
bottom: 24px;
right: 78px;
}
实现原理：通过滚动距离动态控制class
网友评论