0

我的 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 中。有谁知道解决这个问题？

更新：已解决

我通过不使用固定定位，而是使用绝对定位解决了这个问题。如果 div#anchor 的顶部偏移量大于 $(window).scrollTop()，我更改了 javascript 以将 div#floater 的顶部 CSS 属性设置为基于值 $(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:""});
    }
};
4

0 回答 0