zoukankan      html  css  js  c++  java
  • IE6下处理fixed的手段和方法

       经常在网上可以看到那种滚动广告,它相对于页面静止,其实实现起来也很简单,只要用利用position:fixed这个属性就可以实现相对静止的效果,但是遗憾的是IE6并不支持这个属性。

     那么IE6下我们必须使用js的方法来解决它,思路无非就是

    1、获取页面的滚动高度,每次重新为元素的top值赋值,每次都加上相应的scrollTop值即可。

    首先我们需要了解几个概念:

    1、offsetHeight 我们可以简单的理解为元素的固有高度,一个元素形成的时候,浏览器其实已经帮我们计算出了这个盒模型,那么这个offsetHeight就是这个高度

    2、scrollTop 就是视图的滚动高度,当鼠标滑动的时候,页面会相对应的往上跑,那么这个相对于我们被“隐藏起来的区域”就是我们的滚动高度

    3、clientHeight 字面理解就是客户端高度,客户端就是我们的浏览器,那么他就是当前页面浏览器的可视高度,记住是可视,如果页面有一个被隐藏起来或者被缩小,那么不算是它的可是高度

    那么下面只需要两句话就可以解决刚才说的问题

    var oLeft = document.getElementById("left");
    var oRight = document.getElementById("right");
    var clientH=document.documentElement.clientHeight;
    var srcollY=document.documentElement.scrollTop||document.body.scollTop;
    
    oLeft.style.top=(clientH-oLeft.offsetHeight)/3+scrollY+"px";// offsetHeight是元素的元素高度
    oRight.style.top=(clientH-oRight.offsetHeight)/2+scrollY+"px";

    那么这段程序要相应的绑在页面的某些事件让 onload和onscroll事件上,这样一个跟随页面一起动的fixed效果就实现了

  • 相关阅读:
    判断一个字符串之中出现次数最多的字符和它出现的次数
    冒泡排序
    vue 页面生成图片保存
    css实现0.5像素的底边框。
    web之面试常问问题:如何实现水平垂直居中?
    cocos 向左滚动公告
    SpringBoot 访问jsp文件报错Path with "WEB-INF" or "META-INF": [WEB-INF/jsp/welcome.jsp]的解决办法
    vue 弹窗禁止底层滚动
    vue 倒计时 iOS无效
    axios之增删查改操作
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2718316.html
Copyright © 2011-2022 走看看