페이지를 스크롤 할 때 DIV 요소를 위로 이동/수정하려면

DIV 요소의 위치를 수정하는 샘플 HTML 코드를 아래에서 찾으십시오. 이제는 스크롤을 시작한 후에 "setupBar"를 (0, 0) 위치 (또는 스크롤 위치가있는 위치에 따라 적절한 위치)로 옮길 수 있어야합니다.페이지를 스크롤 할 때 DIV 요소를 위로 이동/수정하려면

<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 수정) :

출처

2012-01-09 user1018482

나는 왜 당신이 단지 위치를 사용하기를 원하지 않는지 궁금하다 : 고정; 이 CSS 스타일 정의? 그것은 js 것보다는 더 청결한 해결책 같이 보인다. – Evert

중복 : http://stackoverflow.com/q/7735002/681807 –

CSS는이 목적에 더 좋습니다. – Bernat

는, 당신은 문서를 스크롤 할 때 absolute에 setupBar 위치 mainBar이 자연적으로 경작하기 위해 내가 설정이 http://jsfiddle.net/Kr4TJ/4/

를 원한다. mainBar이 더 이상 표시되지 않으면 setupBar의 위치는 fixed 및 top 거리를 0px으로 설정합니다. mainBar이 다시 표시되면 setupBar 위치가 absolute으로 바뀌고 style.top=""으로 자연스러운 위치로 되돌아갑니다.

출처

2012-01-09 13:40:29 atlavis

예, 고맙습니다. – user1018482

좋은 정보 ... 약간 조정해야했습니다 .... – Grim

에 따라 위 또는 아래로 DIV를 이동할 수있는 JS 솔루션이 솔루션

<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>

을 찾고 있어요

희망이 도움이됩니다. 내가 생각

출처

2012-01-09 12:48:17 AmGates

페이지를 스크롤 할 때 DIV 요소를 위로 이동/수정하려면

답변

관련 문제