我想要实现的是在我的页面顶部的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();
答案 0 :(得分：0)
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。希望您能够根据自己的需求进行调整。