html簡單響應式滾動條置頂

簡單響應式滾動條置頂

一般的，讓頁面出現滾動條的常見方法有：

overflow:auto||overflow:scroll
或者overflow-x水平滾動條和overflow-y垂直滾動條

那么現在要實現這樣的一個效果：

直接在body中給一個header，后面一個Group盒子，並且header為常駐頂部的，實現滾動條頂部位置不滾動到header中（包含在header中會影響美觀） 

---

首先看例子：

分析：

每當滾動條移動到header的高度的位置時，這時盒子中的前排內容是並沒有顯示出來的，但是滾動條到此處就得停止。那么盒子首先就需要設置一個margin-top：header的高 ,和定位top的值 ,在js中也要控制scrollTop值，通過判斷滾動條移動到容器頂部時固定

header{position: fixed;top: 0;left: 0;right: 0;z-index: 999;}  
  #con{margin-top: 150px;position: absolute;top:50px;}

最終效果：

js獲取屏幕滾動條：document.documentElement.scrollTop || document.body.scrollTop