使用鼠标滚轮滚动时铬会闪烁，将div重新定位到$(document).scrollTop()

Question

我试图实现的是页面顶部的div，即使当用户滚动页面时，这个div也驻留在页面上。这似乎是一项常见的任务，我在网上找到了很多解决方案。

最简单的方法似乎是使用jQuery：("header“是我的div的id )

$(window).scroll(function(){
   $("#header").css({
    "top": $(document).scrollTop() + "px"
   });
});

它在Firefox中运行得很好！然而，在Chrome (37.0.2062.103米)中，当我用鼠标轮滚动页面时，头div会出现一些非常奇怪的闪烁。(通过键盘、滚动条或保持鼠标中间按下的按钮可以无缝滚动)。似乎div的重新定位发生了一些延迟，就像页面首先被滚动，然后div被移动到新位置一样。

我本想在JSFiddle中向你们演示这一点，但当我在那里执行时，它甚至在Chrome：http://jsfiddle.net/2tLgtn6c/3/embedded/result/中也能正常工作。

你可以在这里看到奇怪的行为：-站点不再存在--

它与JSFiddle示例中的代码完全相同。我也是张贴在下面。

有什么想法，我能尝试什么？显然，Chrome确实能够正确地显示它，因为它在JSFiddle中工作。任何建议都将不胜感激。

谢谢，莱纳斯

index.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<body>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="main.js"></script> 
</body>
</html>

main.js：

function drawHorizontalHeader(width, height) {

  var headerDiv = document.createElement("div");
  $("body").append(headerDiv);

  headerDiv.id = "header";
  headerDiv.innerHTML = "Horizontal header.";
  headerDiv.style.border = "1px solid blue";
  headerDiv.style.position = "absolute";

  $(headerDiv).width(width);
  $(headerDiv).height(height);

}


function drawMain(width, height) {

  var mainDiv = document.createElement("div");
  $("body").append(mainDiv);

  mainDiv.innerHTML = "Main.";
  mainDiv.style.border = "1px solid red";

  $(mainDiv).width(width);
  $(mainDiv).height(height);
}


function drawPage() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $("body").css("margin", "0px");

  drawHorizontalHeader(windowWidth, windowHeight / 5);
  drawMain(windowWidth, windowHeight * 2);
}

$(window).scroll(function(){
  $("#header").css({
    "top": $(document).scrollTop() + "px"
  });
});


// Draw the page initially.
drawPage();

Answer 1

scroll事件将多次触发，这将导致浏览器重新绘制页面。这会引起闪烁。

与其每次更改窗口的滚动位置时重新计算元素的绝对位置，不如使用CSS属性position: fixed。

HTML：

<div id="header">header</div>
<div id="main">main</div>

CSS：

#header {
    position: fixed;
    height: 2em;
    width: 100%;
    top: 0;
    border: 1px solid red;
}

#main {
    margin-top: 2em;
    border: 1px solid blue;
    height: 1000px;
}

这是一个JSFiddle，展示了我的意思。希望你能使它适应你的需要。