html simple response top scrollbars

Simple set-top response scrollbars

In general, make the page scroll bar appears common methods are:

overflow:auto||overflow:scroll
或者overflow-x水平滚动条和overflow-y垂直滚动条

So now we want to achieve such an effect:

直接在body中给一个header，后面一个Group盒子，并且header为常驻顶部的，实现滚动条顶部位置不滚动到header中（包含在header中会影响美观） 

---

First look at an example:

analysis:

Each time the scroll bar to the height position of the header, then the front and the contents of the box is not displayed, but the scroll bar to have stopped here. Then you need to set a first box margin-top：header的高 ,and positioned topvalues, but also in the js scrollTop control value, by determining when the scroll bar is fixed to the top of the vessel

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

final effect:

js获取屏幕滚动条：document.documentElement.scrollTop || document.body.scrollTop