Question

在我当前的项目中，导航栏的预期行为是它的行为类似于定位的固定导航栏，而不使用位置和/或固定等css属性。我已经玩了很多想法，最后提出了一个非常简单的解决方案。

HTML：

<div style="border:1px solid red;display:inline-block;">
    <div id="nav-scroll-helper"></div>
    <div style="display:inline-block;">Navigation</div>
</div>
<div style="float:right;height:10000px;border:1px solid blue;display:inline-block;">Content</div>

JS

$(window).scroll(function () {
    $("#nav-scroll-helper").animate({
        height: $(document).scrollTop()
    }, 0);
});

...和jsfiddle：https://jsfiddle.net/ej8hwu09/5/

问题是，它在firefox和chrome中效果很好，但在IE中我注意到了橡皮筋的效果。如果向下滚动，导航栏＆＃34;跟随＆＃34;向下滚动而不是与滚动事件并行运行。

非常感谢任何建议！

修改

导航和内容是bootstraps网格布局的一部分。如果我使用定位属性，布局会被破坏。我也尝试过速度来改变身高属性。 IE中的结果相同。

Answer 1

我可以在IE中重现这个问题。这是表演的事情。我认为Chrome和Firefox可以更好地重绘。也许IE尝试重新绘制两次，一次是在滚动发生之后，然后再次重新定位元素之后。所以也许这是一个过度热切的重绘案例：P .animate也可能会增加一点延迟。

如果你的目标只是将导航定位在左上角，你可以使用：

#nav-scroll-helper { position: fixed; top: 0; left: 0; }

这允许浏览器在滚动时优化重新绘制，它不需要重绘该元素，因此不会出现“橡皮筋”效果。

在滚动上设置div高度（IE中的橡皮筋效果）

1 个答案: