窗口發生滾動時候，導航欄和頭部定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* body {
height: 3000px;
} */
.nav {
height: 200px;
text-align: center;
line-height: 200px;
}
.header {
height: 100px;
width: 100%;
line-height: 100px;
color: #ffffff;
font-size: 20px;
background-color: orange;
padding-left: 50px;
}
.oDiv {
width: 50px;
text-align: center;
font-size: 14px;
background-color: #eee;
position: absolute;
top: 500px;
right: 100px;
}
.oDiv a {
display: block;
text-decoration: none;
padding: 5px 5px 0 5px;
height: 45px;
text-align: center;
border-bottom: 1px solid red;
}
.oDiv a:nth-last-child(2) {
line-height: 40px;
color: #000;
}
.oDiv a:nth-last-child(1) {
line-height: 40px;
color: #000;
border-bottom: none;
}
.oDiv a:hover {
background-color: orange;
color: #fff;
font-weight: bold;
}
.oDiv .hide {
display: none;
}
.fixed-top {
position: fixed;
top: 0;
}
.fixed-div {
position: fixed;
top: 100px;
}
p {
height: 500px;
width: 100%;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">滾動此頁</div>
<div class="header">我是頭部</div>
<p>內容一</p>
<p>內容二</p>
<p>內容三</p>
<div class="oDiv">
<a href="#" class="">愛逛<br>好貨</a>
<a href="#" class="center-a">好店<br>直播</a>
<a href="#" class="center-a">品質<br>特色</a>
<a href="#" class="center-a">實惠<br>特賣</a>
<a href="#" class="center-a">猜你<br>喜歡</a>
<a href="#" class="center-a hide">∧<br>頂部</a>
<a href="#" class="center-a">反饋</a>
<a href="#" class="">舉報</a>
</div>
<script>
let nav = document.querySelector('.nav');
let header = document.querySelector('.header');
let oDiv = document.querySelector('.oDiv');
//獲取header到頂部的距離
let origOffsetY = header.offsetTop;
//獲取導航欄div到頂部的距離
let origDivOffsetY = oDiv.offsetTop - header.offsetHeight;
//定義導航欄返回頂部顯示的高度
let navHeight = oDiv.offsetTop;
//滾動事件
window.onscroll = function() {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// console.log(window.scrollY, scrollTop); //兩個值相同
// console.log(window.scrollY, origDivOffsetY);
//頭部定位
window.scrollY >= origOffsetY ? header.classList.add('fixed-top') : header.classList.remove('fixed-top');
//導航欄定位
window.scrollY >= origDivOffsetY ? oDiv.classList.add('fixed-div') : oDiv.classList.remove('fixed-div');
//導航欄上返回頂部鏈接顯示
window.scrollY >= navHeight ? oDiv.querySelector('.hide').style.display = 'block' : oDiv.querySelector('.hide').style.display = 'none';
}
</script>
</body>
</html>
效果圖：
