免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: 浏览器到达指定位置，唤醒position: fixed; [打印本页]
作者: admin    时间: 2016-8-16 09:46
标题: 浏览器到达指定位置，唤醒position: fixed;
当浏览器滚动到某个位置，那么这个位置中的版块 添加 position: fixed; 属性。跟随浏览器一起滚动。

演示地址：http://demo.ourphp.net/?cn-clubview-1.html

那这个效果怎么做呢？

  1. <div style="position:relative">
  2.         <div style="position:absolute">
  3.             <div id="YIQI-UI-FLOAT">
  4.                 浏览器到达这里，将会随浏览器一起滚动
  5.         </div>
  6.     </div>
  7. </div>

  9. <style>
  10.         .div2 {position:fixed; }
  11. </style>
  12. <script>
  13. (function(){
  14.    var oDiv=document.getElementById("YIQI-UI-FLOAT");
  15.    var H=0,iE6;
  16.    var Y=oDiv;
  17.    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
  18.    iE6=window.ActiveXObject&&!window.XMLHttpRequest;
  19.    if(!iE6){
  20.        window.onscroll=function()
  21.        {
  22.            var s=document.body.scrollTop||document.documentElement.scrollTop;
  23.            if(s>H){oDiv.className="div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
  24.            else{oDiv.className="";}   
  25.        };
  26.    }
  27. })();
  28. </script>
复制代码


很简单，就是当浏览器滚动到 标记 YIQI-UI-FLOAT 的时候，自动向 YIQI-UI-FLOAT 追加 CSS  div2 的代码。
div2 中增加 position:fixed;  属性。

相对父元素定位的是position：absolute;
absolute会根据最相近的已定位的祖先元素定位
作者: 蓝色屠龙刀    时间: 2017-9-9 11:28
我很喜欢,太精彩了












同心米粉 手工米粉 广西同心米粉 广西特产 广西特产米粉
作者: 蓝色屠龙刀    时间: 2017-9-18 14:56
谢谢你哦，你是最棒的












批发百香果 网狼农特 百香果 百香果种植 百香果



欢迎光临 免费PHP万能建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://ourphp.net/club/) Powered by Discuz! X3.2