<!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;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>
//獲取頁面向上或者向左捲曲出去的距離的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滾動事件
window.onscroll= function () {
if(getScroll().top>document.getElementById("topPart").offsetHeight){
document.getElementById("navBar").className="nav fixed";
document.getElementById("mainPart").style.marginTop=document.getElementById("navBar").offsetHeight+10+"px";
}else{
document.getElementById("navBar").className="nav";
document.getElementById("mainPart").style.marginTop=10+"px"
}
}
</script>
</body>
</html>
固定導航欄
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
獲取節點的常見方法
//獲取當前節點的父級節點 console.log(obj.parentNode); //獲取當前節點的父級元素 console.log(obj.parentElement); //獲取當前節
html+css實現跳動愛心❥(^_-)
跳動愛心主要用了些css3的動畫效果@keyframe，實現後的效果如下圖（截圖效果比較差）。代碼再往下滑。 1.html代碼 <html> <head> <title>跳動愛心</title>
推薦一本書《CSS: The Missing Manual》-- 一本講css很不錯的書
書名： CSS: The Missing Manual 作者： David McFarland amazon link： www.amaz