javascript - 固定 div 在网页上的位置

Question

我有一个位置已固定的 div。一切都很好，直到重新调整窗口大小。在重新调整大小时，当我们滚动到网页的最右侧时，固定的 div 仍然保留在屏幕的最左端。我希望它与窗口一起向左滚动，但不与窗口一起向下滚动。

如果我不清楚表达我的怀疑。您可以在这里进行现场演示。

搜索任何产品说Apple Ipod Touch那里。显示结果后，调整窗口大小并滚动到最右侧部分。

任何人都可以建议一些 CSS 或 Javascript 来解决相同的问题。

谢谢 ！

Answer 1

我会重组您的布局并删除固定位置。例如像这样的东西。显然，这与您的代码不完全一样。但概念是一样的。如果您的 div 控件与结果和历史记录位于同一容器内，则它应该随之移动。

#wrapper {
width:960px;
margin:0 auto 0 auto;
}

#left-col,
#right-col {
width:100px;
float:left;
}

#mid-col {
width:710px;
float:left;
}

<!-- holds your column containers -->
<div id="wrapper">

<!-- your control -->
<div id="left-col"> 
</div>

<!-- your search results -->
<div id="mid-col"> 
</div>

<!-- your history -->
<div id="right-col"> 
</div>

</div>

Answer 2

使用CSS 媒体查询或 Javascript。一种快速的方法是使用 Jquery $(window).resize方法。

Answer 3

我想你只需要删除

position: fixed从#completeSlider

至少这在 chrome 上对我有用。

编辑：

那么我会说你需要使用 JQuery 来处理这个问题。您不能既拥有固定的定位又相对于其他元素。仍然position: fixed如上所述删除并添加一些 JQuery 魔术，如下所示：

$(window).scroll(function() {

$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});

});

似乎$jQuery 的标准是为您页面上的其他一些功能保留的......试试这个：

jQuery(window).scroll(function() {

    jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});

});