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

Posted 2020-11-14 TimLinux

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