很簡單但很實用的功能饲常。
效果演示：
導(dǎo)航欄固定
源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
#Q-nav1 {
overflow: hidden;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script>
window.onload = function () {
//需求1：當(dāng)我們滾動界面的時候己英，被卷曲的頭部超過第二個盒子距離頂部的位置私股，那么直接給第二個盒子加類名.fixed
//需求2：當(dāng)我們滾動界面的時候常潮，被卷曲的頭部小于第二個盒子距離頂部的位置，那么直接給第二個盒子取消類名.fixed
//步驟：
//1.老三步亿柑。
//2.判斷 味咳，被卷曲的頭部的大小
//3.滿足條件添加類，否則刪除類
var top=document.getElementById("top");
var topHeight=top.offsetHeight;
var nav1=document.getElementById("Q-nav1");
var main=document.getElementById("main");
window.onscroll=function(){
if (scroll().top>topHeight) {
nav1.className+=" fixed";
top.style.marginBottom=nav1.offsetHeight+"px"
} else{
nav1.className=""
top.style.marginBottom=0+"px"
}
}
function scroll() { // 開始封裝自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本瀏覽器
// 因為 window.pageYOffset 默認(rèn)的是 0 所以這里需要判斷
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 標(biāo)準(zhǔn)瀏覽器 來判斷有沒有聲明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未聲明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}
</script>
</head>
<body>
<div class="top" id="top">
<img src="images/top.png" alt=""/>
</div>
<div id="Q-nav1">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="main">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>
