如何让一个层始终显示在网页的固定位置

我不是女神ヾ 2022-08-21 11:53 252阅读 0赞

析:遇到这个问题的时候我们总是第一时间想到用一个浮动的DIV,然后通过JavaScript控制window.onscroll来控制DIV的位置,从而达到我们希望这个层在页面的固定位置

但是这种方式有一个缺点,那就是我们在滑动鼠标的时候,层会跟着鼠标的滚动而抖动,为了避免这个情况的发生,可以用下面的方式实现!

1.放一个大的层,长和宽都是100%,并且是浮动的,超出的部分(overflow)用auto.

2.再放一个小的层,也是浮动的,而且z-index为最大,让它始终在最上面,我们可以通过控制这个层的top,left,right,botton来控制层在网页中的具体位置

3.设置body的margin为0,否则我们将看不完滚动条

4.设置body的scroll为no,让窗体没有滚动条,而层来显示滚动条

5.所有网页其他的内容都放在大层里面

具体代码如下:








这里写网页的其他


这个层始终在顶部


发表评论

表情:
评论列表 (有 0 条评论,252人围观)

还没有评论,来说两句吧...

相关阅读

    相关 始终footer底部

    1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白   第

    相关 HTML页脚始终固定底部

    页脚固定在底部分两种情况考虑,一种是有滑动栏的情况,一种是没有的。后者比较简单,直接加上定位属性就是了,但是在页面内容是扩充整个页面以至于可以下滑浏览时,这时候单纯加上定位属