浏览器到达指定位置，唤醒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>
   
8. 
   
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会根据最相近的已定位的祖先元素定位

我很喜欢,太精彩了












同心米粉 手工米粉 广西同心米粉 广西特产 广西特产米粉

谢谢你哦，你是最棒的












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