[TimLinux] JavaScript position为fixed时支持水平滚动条
1. 固定定位
position: fixed;设置好之后,元素在浏览器窗口中的位置就固定住了,这个时候,不论是水平移动滚动条,还是垂直移动滚动条,元素是打死都不会动的。
但是当用fixed定位的元素,作为header部分的时候,浏览器窗口一旦缩小了,不让移动,那就会导致右侧的导览看不到也点不到了,比如“登录”按钮,这个时候大家就想骂娘了,然后骂娘并没有卵用。
2. onscroll事件
滚动条发生滚动的时候,window对象上发生了onscroll事件了。我们的方法就是,将一个函数(或者多个函数)注册到window.onscroll事件上,当事件发生时,动态更新元素的left值来实现fixed元素的移动功能。
3. 初始状态
当页面首次加载的时候,浏览器的滚动条的位置已经偏离正常值,这个时候并不会发生滚动事件,这时候就需要在文档准备好之后,由JavaScript代码来触发一次onscroll事件了。触发事件的方法有三个步骤:
- document.createEvent('Events') 返回一个event 对象,如:ev;
- ev.initEvents('scroll', false, true) 初始化事件到onscroll上;
- window.dispatchEvent(ev) 在window元素上触发事件了。
4. 示例
比较简单的示例如下:
function triggerScroll() { var ev = document.createEvent('Events'); ev.initEvent('scroll', false, true); window.dispatchEvent(ev); } $(document).ready = function () { triggerScroll(); } window.onscroll = function () { var leftWidth = document.body.scrollLeft; var fixedElement = document.getElementById('fixedElement'); fixedElement.style.left = "-" + leftWidth + "px"; }