Question

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

如果我不清楚表达我的怀疑。您可以拥有live demo here。

在那里搜索任何产品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 Media Queries或Javascript。一种快速的方法是使用Jquery $(window).resize方法。

Answer 3

我认为你只需要删除

来自position: fixed

的

#completeSlider

至少那对我有用的铬。

编辑：

然后我会说你需要使用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});

});

在网页上修复div的位置

3 个答案: