[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";
}

原文地址:https://www.cnblogs.com/timlinux/p/9159739.html

时间: 2024-11-14 13:01:30

[TimLinux] JavaScript position为fixed时支持水平滚动条的相关文章

chrome 下 position:fixed失效(react)

子元素使用position:fixed时,没有相对于浏览器视窗进行定位,排查后发现他的祖先元素设置了transform属性 当transform属性值不为none时,设置了position:fixed的元素会相对于设置了transform属性的元素进行定位(而不是视窗) 解决办法:1.react中,使用ReactDOM.createPortal将子元素portal到元素外边 2.可以在body里面添加两个div,第一个div设置为内容容器,把需要translate的那部分都放到第一个div里面,

为MFC中的ListBox添加水平滚动条

我们知道,MFC中的水平滚动条并不像垂直滚动条那样的智能.当文字超出ListBox的宽度时,水平滚动条并不会自己出现,我们需要手动的调用CListBox中的函数SetHorizontalExtent设置宽度,单位为像素. 我们可以自己添加智能水平滚动条,现在我们首先随便创建一个ListBox控件,并将它的HorizontalScrollbar属性设置为True,如下: 这样,控件的创建就完成了,然后就需要添加代码来实现智能水平滚动条了. 首先,我们创建一个类,这里,我命名为CIHListBox,

IE6浏览器不支持固定定位(position:fixed)解决方案

代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> </head> <body> <div style="width

IE6下position:fixed不支持问题及其解决方案

IE6有诸多奇葩,不支持position:fixed就是其中之一.所以在做一些比如固定在顶部或者底部或者固定元素的效果时需要考虑兼容IE6的这个问题.解决方案是用Ie6的hack. *html {/* 只有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */ } #box { /* 非IE6浏览器使用固定元素 */ position: fixed; top: 0; left: 0

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层

安卓自带浏览器 position:fixed时 图片模糊问题

最近遇到一个问题:给一个div做position:fixed时,div里的图片在小米1s自带浏览器里面图片显示模糊了,而其它浏览器图片都是清楚的(说明:已经是2倍的图片了).代码如下: <div class="position:fixed">     <img src="xxx"> </div> 只要将posiiton:fixed去除时,图片又是清晰的.经过一方排插和google,确定该问题是andorid自带浏览器bug,在po

iframe子页面position的fixed

前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面,一共就是三层. 下午就其iframe子页面固定定位问题进行处理,上网找了各种解决方案:插件.js模拟等效果均不理想.页面不是代码过多就是效果卡顿.跳动(附:博主的同事架构的页面是用于手机微信端,部分PC端的优秀代码并不适用,非代码不行).无奈之下只得另想出路,最终功能完美实现,现拿出来与大家共享.

(转)实例详解CSS中position的fixed属性使用

关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left". "top". "right". "bottom" 属性进行定位. 那么,我们了解了fixed属性的说明后,就可以知道它的作用了.当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位

ASP.NET开发在JavaScript有中文汉字时出现乱码时简单有效的解决

一般情况在使用ASP.NET开发使用JavaScript有中文汉字时不会出现乱码情况,比如:alert('您看到我了吗?');这样直接输入中文汉字的代码中是不会出现乱码的,如果出现了,一是检查Web.config文件确保统一编码形式:二是设置页面的编码,如:charset=utf-8等措施,可在网上查询相关解决方案,这不是本随笔要阐述的问题.      本随笔主要讨论,有些时候用JavaScript调用了后台代码中传入的中文汉字会出现乱码,比如访问了Cookie中含有中文汉字的情况.我这里使用的