关于DIV浮动定位


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> Sohu_Crazy </title>
  <meta name="generator" content="editplus" />
 </head> <body>
  <script type="text/javascript">
  <!--


var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

var sbrowser = window.navigator.userAgent;
var Sys = {},s;
(s = sbrowser.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = sbrowser.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = sbrowser.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = sbrowser.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = sbrowser.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; var $ = function(sId){
return "string" == typeof(sId) ? document.getElementById(sId) : sId;
} var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
} function addEventHandler(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType, fnHandler, false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on" + sEventType, fnHandler);
}else{
oTarget["on" + sEventType] = fnHandler;
}
 }  var isSafa = (window.openDatabase) ? true : false;  var YoYiCrazy = function(){
this.oMaxContianer_Width = 500;  // 大DIV宽
this.oMaxContianer_Height  = 300; // 大DIV高
this._top  = 0;
this._maxMiddleLeft = 0;
 };  YoYiCrazy.prototype = {  // 创建容器Div
 CreateContainer:function(){
document.write("<div id='crazy_maxdiv' style='width:"+this.oMaxContianer_Width+"px;height:"+this.oMaxContianer_Height+"px;z-index:12299; overflow:hidden;border:2px solid #D2D2D2;background-color:#F6F6F6'></div>");
this.Container = $("crazy_maxdiv");
 },  // 修正IE6的滚动程序(在此 有问题)
 SetFixed: function(obj){
this._StartPoint = parseInt(obj.style.top, 10);
            this._EndPoint = d.scrollTop + this._top;    
            if(this._StartPoint != this._EndPoint){
                 this._ScrollAmount = Math.abs( this._EndPoint - this._StartPoint );
                 obj.style.top = parseInt(obj.style.top, 10) + ( ( this._EndPoint<this._StartPoint ) ? -this._ScrollAmount : this._ScrollAmount )+"px";
            }
 },  // 程序初始化
 init: function(){
// Safari不进行操作
if(!!isSafa)  return;
var $d = document.compatMode == "BackCompat" ? d = document.body : d = document.documentElement; if(isIE6) {
this._fixed = Bind(this, function(obj){ this.SetFixed(obj);})
}

// 创建Div
this.CreateContainer(); // IE6: position = absolute 其他: position = fixed
this.Container.style.position = !isIE6 ? "fixed" : "absolute";
this.Container.style.left = "50%";
this.Container.style.top = this._top + "px";
this.Container.style.marginLeft = - (this.Container.offsetWidth / 2 + this._maxMiddleLeft)+ "px";
var oThis = this;
if(isIE6) {
addEventHandler(window, "scroll", (function(obj){
return function(){
oThis._fixed(obj);
}
})(this.Container));
}
}   

 }
 var yoyi_crazy = new YoYiCrazy();
 yoyi_crazy.oMaxContianer_Width = 300;
 yoyi_crazy._top = 700;
 yoyi_crazy._maxMiddleLeft = 180;
 yoyi_crazy.init()

  //-->
  </script>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
 </body>
</html>现在基本功能实现  现在出现问题是 当DIV的TOP值 撑破页面的时候  在IE6滚动条一直不能滚动到最后期望，让滚动条滚动到最后，效果可以参考FF或Chrome下效果。滚动修正函数为SetFixed

解决方案 »

  1.   

    TO: lihan6415151528 
    我这代码  繁杂么？而且效果我也跟大家说了，就是IE6下滚动条的问题 滚不到最后而且 说明了 函数SetFixed:就是滚动条的问题
      

  2.   

    应该实现的是修复ie6 position:fixed无效的BUG http://www.scriptlover.com/controls/FixedPosition/ 这个有个修复的例子，lz看下。
      

  3.   

    你是通过设置top来修正ie的fixed问题，当你的_top属性设置超过了显示区域时，你的div将用于处于显示区域下方，这样页面将无限拉长，this._StartPoint != this._EndPoint也将一直成立了。
    你可以修改下div的添加方法，改为append，然后在window.onload中建立你的对象，多加一个属性为_bodyScrollHeight存储body的滚动高度，然后根据这个属性来控制是否设置top属性。如果超过了_bodyScrollHeight则需要隐藏此div。
      

  4.   

    顶一下 自己的帖子 继续等个方案现在要求就是: 如果Div超过显示区域了 那么一开始就是正常浮动 当检测到滚动条拉到最底端的时候 让DIV 全部显示出来
      

  5.   


    var _overHeight = this._top + this.Container.offsetHeight - d.clientHeight;
    if(_overHeight > 0){
    // 并且滚动条拉到最底端
    if(d.scrollHeight <= d.scrollTop + d.clientHeight ){
    this.Container.style.top = parseInt(this.Container.style.top, 10) - _overHeight + "px";
    }