Question

请在下面找到修复DIV元素位置的示例HTML代码。现在，我需要能够在开始滚动后将“setupBar”移动到（0,0）位置（或基于滚动位置的适当位置），然后将其冻结。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body>
<div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="position:fixed; border:1px solid blue; height:20px; width:100%"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>
</body>
</html>

PS：我正在寻找可以根据当前滚动位置（不是CSS修复）向上或向下移动DIV的JS解决方案：）

Answer 1

我想，你想要这个http://jsfiddle.net/Kr4TJ/4/

我将setupBar位置设置为absolute，以便在文档滚动时使其自然休mainBar。当mainBar不再可见时，setupBar的位置设置为fixed，top距离设置为0px。如果再次显示mainBar，则setupBar位置会更改回absolute并设置style.top=""，这会恢复到自然位置。

Answer 2

试试这个解决方案

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<script type="text/javascript">
function $(obj)
{
    return document.getElementById(obj);
}
function fixSetupBar()
{
    $("setupBar").style.top=(document.body.scrollTop)+"px";
    $("setupBar").style.left=(document.body.scrollLeft)+"px";
}
</script>
</head>
<body onscroll="fixSetupBar()">
<div id="mainBar" style="height:20px; border:1px solid red"></div>
<div id="setupBar" style="position:absolute;top:0px;left:0px;border:1px solid blue; height:20px; width:100%"></div>
<div style="height:1500px; background-color:#CCCCCC"></div>
</body>
</html>

希望这有帮助。

在滚动页面时将DIV元素移动/固定到顶部

2 个答案: