JavaScript實現小效果:導航吸頂,當滾動一定距離時,導航固定在頂部。
HTML:
<header id="head">
<img src="./images/top.png" alt="">
</header>
<nav id="nav">
<img src="./images/nav.png" alt="">
</nav>
<section class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</section>
css:
*{
margin:0;
padding:0;
list-style: none;
border:none;
}
#head img,nav img{
vertical-align: top;
width:100%;
}
.nav-top{
position: fixed;
top:0;
left:0;
width: 100%;
}
.main>p{
width:100%;
height: 250px;
}
.main>p:nth-child(even){
background-color: antiquewhite;
}
.main>p:nth-child(odd){
background-color:rgb(176, 223, 162);
}
JavaScript:
window.οnlοad=function(){
//1 求 offsetHeight
var nav_top_height=$("nav").offsetTop;
//2 監聽窗口滾動
window.οnscrοll=function(){
var scroll_top_height=scroll().top;
//2.1 判斷
if(scroll_top_height>=nav_top_height){
$("nav").className="nav-top";
}else{
$("nav").className="";
}
}
}
function scroll() {
if(window.pageYOffset !== null){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === "CSS1Compat"){ // W3C
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}