Question

我的HTML基本上是这样的：

<div id="#container">
  <div id="left_col">
    left stuff
  </div>
  <div id="middle_col">
    middle stuff
  </div>
  <div id="right_col">
     <div id="anchor"></div>
     <div id="floater>
       The problem div
     </div>
  </div>
</div>

容器div向左推82px，因为我不希望最右边的列用作居中的一部分（上面有一个标题导航栏，即left_col和middle_col的大小）：

#container {
    width: 1124px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    color: #656f79;
    position: relative;
    left: 82px;
}

#left_col {
    float:left;
    width: 410px;
    background-color: #fff;
    padding-bottom: 10px;
}

#middle_col {
    width: 545px;
    float: left;
}

#right_col {
    float: left;
    width: 154px;
    margin-left: 5px;
    position:relative;
}

#floater {
    width: 154px;
}

当您向下滚动页面时，我正在使用以下javascript来保持#floater div的位置：

var a = function() {
    var b = $(window).scrollTop();
    var d = $("#anchor").offset().top;
    var c = $("#floater");
    if (b > d) {
        c.css({position:"fixed",top:"10px"});
    } else {
        c.css({position:"absolute",top:""});
    }
};
$(window).scroll(a);
a();

我遇到的问题是，在基于WebKit的浏览器中，一旦jQuery使浮动div的位置固定，因此它将从顶部保持10px，来自#container的“left：82px”消失，导致#floater向左跳82px。这不会发生在FF或IE中。有人知道解决方案吗？

更新：已解决

我通过不使用固定定位来解决这个问题，而是使用绝对定位。我更改了javascript，将div #floater的顶级CSS属性设置为基于值$（window）.scrollTop（），如果div＃anchor的顶部偏移量大于$（window）.scrollTop（）。很简单。

所以a（）函数现在看起来像这样：

var a = function() {
    var b = $(window).scrollTop();
    var d = $("#anchor").offset().top;
    var c = $("#floater");
    if (b > d) {
        var t = b-200; //200px is the height of the header, I subtract to make it float near the top
        c.css({top:t+"px"});
    } else {
        c.css({top:""});
    }
};

将绝对div定位在相对父级 - webkit浏览器中

0 个答案: