5

我有 4 个 DIV，我正在更改滚动上 4 个元素的位置，如下所示 

 function adjustPositions(e) {
    var div = e ? $(this) : $('.parent');
    div.find('.left').css({
      left: div.scrollLeft() + "px"
    });
    var right = div.find('.right');
    right.css({
       left: div.scrollLeft() + div.width() - right.width() + "px"
    });
    div.find('.header').css({
       top: div.scrollTop() + "px"
    });
    var bottom = div.find('.footer');
    bottom.css({
      top: div.scrollTop() + div.height() - bottom.height() + "px"
    });
 }
 adjustPositions();
 $('.parent').on('scroll', adjustPositions);

这是小提琴http://jsfiddle.net/8NL2S/5/，当我在 Safari 中测试它时，它会闪烁。这没有什么花哨的。Safari 在同样的情况下多次激发了我的希望。我怎样才能解决这个问题。

4

5 回答 5

3

我可能在这里想得太简单了，但不定位：固定解决您的问题？

恐怕没有包括javascript在内的好的解决方案。Safari 处理 javascript 的速度还不够好，无法获得流畅的动画。

下面您将找到仅使用 css 来解决您的问题的下一个最佳解决方案。

我将您的 CSS 编辑为以下内容：

.header{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    height:1000px;
    width:100px;
    left:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.right{
    height:1000px;
    width:100px;
    right:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.footer{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:1000px;
    width:1000px;
    position:relative;
}

我删除了所有的javascript。除此之外，什么都没有改变。

见小提琴

于 2013-10-09T15:32:18.420 回答
1

你可能正在寻找这样的东西？
http://jsfiddle.net/sijav/8NL2S/12/
你必须每转position:fixed... noo 需要使用 JQuery

于 2013-10-06T18:33:08.910 回答
1

如果您的 div 大小是固定的，并且您希望在所有浏览器中处于相同位置，则无需调用 js 函数只需设置 css float:left; 拥有所有 div 的属性，并在该 4 div 的外部 div 上使用 cf 类。示例是：

HTML:

<div class="parent">
    <div class="static cf">
        <div class="left"></div>
        <div class="right"></div>
        <div class="header"></div>
        <div class="footer"></div>
    </div>
</div>

CSS:


.header{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    border:1px solid red;
    height:100px;
    width:100px;
    left:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.right{
    border:1px solid red;
    height:100px;
    width:100px;
    right:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.footer{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:105px;
    width:410px;
    position:relative;
}
.cf{clear:both}
于 2013-10-10T13:14:32.420 回答
1

使用position:fixed上面建议的方式将您的内部 div 相对于窗口而不是父 div 定位。如果您想保留所有内容.parent，请使用下面的 CSS（无需 JS）：

.parent {
    position:relative;
    height:400px;
    width:800px;
    margin:0 auto;
    overflow:auto;
    border:1px solid #CCC;
}
.header, .footer {
    position:fixed;
    width: 800px; /* .parent width */
    height:100px;
    z-index:10;
    background-color:#F2F2F2;
}

.footer {
    margin-top: 300px; /* .parent hight - .footer hight */
}

.left, .right {
    position:fixed;
    width: 100px;
    height: 400px; /* .parent height */
    background-color:#CCC;
}

.right {
    margin-left: 700px; /* .parent width - .right width */
}

.static {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1000px;
}

这应该给出您想要实现的布局和行为而不会闪烁。你可以在下面试试。

http://jsfiddle.net/myajouri/VYmHv/1/

希望有帮助！

于 2013-10-10T19:17:26.343 回答
0

由于滚动功能，当您滚动时，div 会重新渲染/重新定位，因此您的帧会闪烁。为了防止这种情况，您最好使用不同的方法来创建您的显示。

由于您似乎使用带有 css 和 jquery 文件的普通 html，因此还有许多其他方法可以解决您的问题。

第一种方法是简单地删除您的滚动功能，看起来您不需要它们。position:fixed会修复它，以便您的 div 在您滚动时跟随您。

另一种方法是使用任何类型的框架。这可以是基于 CSSGrid 的，因为 Kerry Liu 在评论中展示了一个示例，或者如果你很绝望，它可以是基于 html 的（如<frame>）。

如果您对样式和定位有更高的要求，那么也许有一个 Jquery 插件可以帮助您进一步。

于 2013-10-04T10:09:46.880 回答