Common page layouts-head pinning + custom scroll bars

Did a small demo, belonging to the common page layout application, for Ie7+,chrome,safari,firefox,opera, other browsers did not test. There should be a lot of small problems, but here is only a small demo, if you have found some small problems, you can communicate with me, learn from each other. Here's all the code:

1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Document</title>6<script src= "Https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" ></script>7<style>8 Html,body {9height:100%;Ten Overflow:hidden; One     } A Body { -margin:0; -     } the #top { -width:100%; - height:80px; - background:purple; + position:fixed; -Z-index:1; +     } A #wrap { atwidth:100%; - Height:auto; - background: #ccc; - position:relative; - top:80px; -     } in . item{ -width:100%; to height:400px; +margin:0Auto; -font-family: "Microsoft Yahei"; thefont-size:100px; *text-Align:center; $line-height:400px;Panax Notoginseng color: #fff; -     } the . item1{ + background: #FFB806; A     } the . item2 { + background: #FF4E53; -     } $ . item3 { $ background: #3FB470; -     } - . item4 { the background: #08559D; -     }Wuyi . ITEM5 { the background: #FEE006; -     } Wu #down { -width:100%; About height:280px; $Background: #333; -     } - #scroll { - width:15px; Aheight:100%; + position:fixed; theright:0; -top:0; $z-index:100; theBackground:url (image/scrollbg.jpg) repeat-y; the     } the #scrollbar { the width:12px; - height:100px; inBackground:url (image/scrollbar.png) no-repeat; the Position:absolute; the left:1px; Abouttop:0; the     } the</style> the<script> +Window.onload =function(){ -         /*  the IE8 below does not support the Queryselector selector, need to deal with IE compatibilityBayi var scroll = document.queryselector (". Scroll"); the var scrollbar = Document.queryselector (". ScrollBar"); the         */ -      -         vartop = document.getElementById ("Top"); the         varWrap = document.getElementById ("Wrap"); the         varScroll = document.getElementById ("scroll"); the         varScrollBar = document.getElementById ("ScrollBar"); the  -         //Calculate page Height the         varTopH = Top.offsetheight;// the the         varWraph = Wrap.offsetheight;//2280 the         varTotal = TopH + wraph;//236094          the         //Calculate scrollbar Height the         varSCROLLH = Document.body.clientHeight | | Document.documentElement.clientHeight;//Visible Area Height the         varScrollbarh = Scrollbar.offsetheight;// -98          About  -         //scroll bar and drag101         varDowny=bartop=disy=iscale=0;102Scrollbar.onmousedown =function(event) {103 104             varE = Event | |window.event; theDownY =E.clienty;106Bartop = parsefloat (GetStyle (ScrollBar, ' top '));107 108Document.onmousemove =function(event) {109  the                 varE = Event | |window.event;111                 varNowy =E.clienty; theDisy = Nowy-DownY;113                 varRangey = Bartop +Disy; the                 if(Rangey <=0){ theScrollbar.style.top = 0 + ' px '; theWrap.style.top = + ' px ';117}Else if(Rangey >= scrollh-Scrollbarh) {118Scrollbar.style.top = Scrollh-scrollbarh + ' px ';119}Else{ -Scrollbar.style.top = rangey + ' px ';121Iscale = parsefloat (GetStyle (ScrollBar, ' top ')/(Scrollh-scrollbarh);122Wrap.style.top = + (+ scrollh-total) *iscale + ' px ';123                 }124             } theDocument.onmouseup =function(){126Document.onmousemove =NULL;127Document.onmouseup =NULL; -             }129             return false; the         }131  the         //browser window reset, scrolling scale and position of scroll bar need to be recalculated133Window.onresize =function(){134SCROLLH = Document.body.clientHeight | |Document.documentElement.clientHeight;135Scrollbar.style.top = iscale* (Scrollh-scrollbarh) + ' px ';136         }137     }138     functionGetStyle (obj,attr) {139         if(obj.currentstyle) { $             returnobj.currentstyle[attr];141}Else{142             returngetComputedStyle (obj,false) [attr];143         }144     }145</script>146147<body>148149<section id= "Wrap" > Max<div class= "Item Item1" >item1</div>151<div class= "Item item2" >item2</div> the<div class= "Item Item3" >item3</div>153<div class= "Item Item4" >item4</div>154<div class= "Item ITEM5" >item5</div>155<footer id= "Down" ></footer>156</section>157 158<!--scroll bar settings--159<div id= "Scroll" > the<div id= "ScrollBar" ></div>161</div>162</body>163View Code
Source File Links: Http://pan.baidu.com/s/1slMPPaX
Common page layouts-head pinning + custom scroll bars