一個比較靠譜的原生js導航懸浮
我不太會寫js,但是今天看了我上一篇文章的代碼裡以後也寫了一個原生js,沒想到z哎我這裡顯得比那個好用,你們知道那種感覺麼,感覺自己一下子就有如神助一樣。感謝覃爍弟弟,我這人生低穀給我寫了一封信。還推薦給我一個群,這個群裡果然都不是水啊,天天都在討論技術,就算我不懂,但這裡氛圍也是極好的!哈哈哈哈不說廢話了,好好學習貼代碼我的js水平連幼兒園小朋友都可以看得懂大家就當入門吧js:
window.onload=function(){ var nav=document.getElementById('nav'); var navFixed=document.getElementById('navFixed'); window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop; if (scrollTop>90){ navFixed.style.display="block"; } if (scrollTop<90) { navFixed.style.display="none"; } else{}; }};
是不是和上一篇很像呀~css:
.Navi,.NaviFix{color:#fff;width: 100%;background-color: #000;z-index: 1000;} .Navi li,.NaviFix li{float: left;line-height: 100px;} .Navi li a,.NaviFix li a{color: #fff;font-size: 24px;width:163px;display: block;height: 100px;width: 163px;} .Navi li a:hover,.NaviFix li a:hover{color: #fff;font-size: 24px;width:163px;background-color: #292929;line-height: 100px;height: 100px;}.NaviFix{position: fixed;top: 0px;}.Navi{position:absolute;top: 0px;}html: <div class="Navi"> <ul id="nav" class="clearfix"> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> </ul> </div> <div id="navFixed" class="NaviFix" style="display:none;"> <ul id="navFixed" class="clearfix"> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> <li><a href="">aaa</a></li> </ul> </div>
不得不感慨年輕就是好我記得我17歲的時候也是誰都關心,誰的事兒都想幫一把。深深地一副我們都是社會主義接班人的樣子同班同學小學同學親戚朋友沒有一個我不關心的真的很想回到那個純淨的天空裡去~我還是一個開心快樂的我