[TimLinux] JavaScript position为fixed时支持水平滚动条
2024-09-01 19:51:27
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";
}
最新文章
- neo4j-简介,安装
- php创建文件并写入信息
- 【BZOJ】1038: [ZJOI2008]瞭望塔
- OC: Block回调的使用demo
- 配置Outlook Anywhere2010
- Shadow Mapping 的原理与实践(一)
- 使用ng-if,获取不到里面的ng-model值,解决方案
- Codeforces Round #281 (Div. 2) 解题报告
- jQuery多文件
- Java中的 List Set Map
- C# 6.0 内插字符串 (Interpolated Strings )
- Use try-with-resources
- [Python]Python中的包(Package)
- HDU 4417 Super Mario(主席树 区间不超过k的个数)题解
- Codeforces Round #552 (Div. 3) C题
- redux源码学习笔记 - combineReducers
- 译:4.RabbitMQ Java Client 之 Routing(路由)
- linux下使用ftp传递文件的shell脚本
- ArcEngine几何变换中的策略模式
- Golang 的 TOML库