[TimLinux] JavaScript position为fixed时支持水平滚动条

1. 固定定位

position: fixed;设置好之后,元素在浏览器窗口中的位置就固定住了,这个时候,不论是水平移动滚动条,还是垂直移动滚动条,元素是打死都不会动的。

但是当用fixed定位的元素,作为header部分的时候,浏览器窗口一旦缩小了,不让移动,那就会导致右侧的导览看不到也点不到了,比如“登录”按钮,这个时候大家就想骂娘了,然后骂娘并没有卵用。

2. onscroll事件

滚动条发生滚动的时候,window对象上发生了onscroll事件了。我们的方法就是,将一个函数(或者多个函数)注册到window.onscroll事件上,当事件发生时,动态更新元素的left值来实现fixed元素的移动功能。

3. 初始状态

当页面首次加载的时候,浏览器的滚动条的位置已经偏离正常值,这个时候并不会发生滚动事件,这时候就需要在文档准备好之后,由JavaScript代码来触发一次onscroll事件了。触发事件的方法有三个步骤:

  1. document.createEvent('Events')  返回一个event 对象,如:ev;
  2. ev.initEvents('scroll', false, true) 初始化事件到onscroll上;
  3. 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";
}
View Code

 

posted @ 2018-06-09 15:44  TimLinux  阅读(234)  评论(0编辑  收藏  举报