純CSS代碼制作跟隨滾動的頂部導航欄,無JS代碼

以有妖氣為例,讓頂部導航欄固定滾動在頁面上.
1.效果如下:初始化↓↓↓

滾動效果↓↓↓

2.實現思路需求:  頂部只有一個且只需要移動一個導航欄
實現思路:  給導航欄添加固定定位(fixed),這時候脫離了標准流浮動起來了;
問題:  底下的盒子會往上跑占據導航欄原來的位置
解決辦法:  給導航欄下面的盒子添加頂部內邊距(padding-top),值等於導航欄的高度.
3.css代碼

.top-nav {
 /*頂部導航欄*/
 background: rgba(244, 245, 246, .95);
 position: fixed;
 width: 100%;
 height: 100px;
 z-index: 10;
}

.banner {
 /*滾動廣告幅*/




 padding-top: 100px;
 margin: 0 auto;
 width: 1920px;
 height: 711px;
 position: relative;
}

4.總結優點是簡單快捷,平滑無卡頓; 
注意事項是此代碼只適應頂部導航欄移動需求.
如果有更簡單的還望告知,虛心向學.