标签：pre 变化 nbsp 函数 mouse 事件 中间 get win
需求：滚动页面到一定距离后，页面中间的导航条固定到页面的某个位置不动，滚回去时会复原。
document.addEventListener(‘scroll‘, function (event) { var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; if (scrollDistance >= 230) { // 触发的位置 document.getElementsByClassName(‘nav-items‘)[0].style.cssText = ‘position:fixed;top:-10px;‘; } else { document.getElementsByClassName(‘mu-tabs‘)[0].style.cssText = ‘position:static;‘; } });
注意：
1.子元素和父元素都有滚动条时，滚动鼠标滚轮：
鼠标在父元素中，页面只滚动父元素；鼠标在子元素中时，页面只滚动子元素，只有当子元素滚到底之后，才会滚动父元素。
如果要在子元素中直接滚动父元素，只能先把子元素的滚动条消除，如把子元素的容器高度设置成auto，或通过mousewheel/touchmove事件函数处理。
2.元素的position从static变为fixed时，会从原来的文档流中删除，高度发生变化，导致页面有轻微的跳动。解决方法是在导航条外层加一个高度相同的容器包裹一下。
<div class=‘navsContainer‘> <ul class=‘nav-items‘> <li>index</li> <li>details</li> <li>about</li> </ul> </div>
标签：pre 变化 nbsp 函数 mouse 事件 中间 get win
原文地址：http://www.cnblogs.com/kevin2chen/p/7616747.html
