Navigation固定上方,往下瀏覽頁面時縮小效果
此篇講述什麼是Web Sticky效果,固定nav及縮小,及紀錄遇到的困難、改良後的JavaScript寫法。
將會使用到CSS、JavaScript。
什麼是Sticky?
固定Nav後會隨著捲軸拉下去而縮小
請點我預覽DEMO效果
HTML架構:
流程圖
錯誤示範
- 超新手時期的我居然這樣寫XDD,程式碼真的是又臭又長天啊,把JS和CSS全部寫在一起了=_=
- 千萬不要這麼做,把CSS, JS分離,日後才好維護程式碼!
改良後Js寫法
將CSS分歸類在JS要新增的CSS CLASS裡,JS只新增CLASS
一目瞭然!1
2
3
4
5
6
7
8 $(function(){
$(window).scroll(function(){
if($(window).scrolltop() > 0)
$(‘#header’).addclass(‘mini’);
else
$(‘#header’).removeclass(‘mini’);
});
});
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!