2012-01-21 6 views
2

div가 400px로 높고 내용이 스크롤됩니다. 나는이 div가 position : absolute를 사용하여이 부모 div의 맨 아래에 앉아있다. 하단 : 0; 하지만 스크롤 할 때 내용이있는 상위 div가 위로 이동합니다.스크롤하는 다른 div의 맨 아래에 div를 유지하는 방법

jQuery를 사용하여 사용자가 부모 div를 스크롤 할 때마다 div의 위치가 맨 아래로 변경됩니다.이 방법은 div가 스크롤 될 때마다 점프됩니다.

부드러운 두루마기로이 작업을 수행 할 수있는 방법이 있습니까? 부모 div의 맨 아래에 앉아서 전혀 움직이지 않기를 바랍니다.

감사합니다.

답변

6

div가 포함 된 div를 다른 div 안에 넣고 부모를 기준으로 이미지의 위치를 ​​지정할 수 있습니다. 스크롤바가있는 경우 스크롤바의 높이를 고려해야하지만 그렇지 않은 경우에는 스크롤바의 높이를 고려해야합니다. 나는 너를 위해 jsfiddle을 만들려고 노력할 것이다.

http://jsfiddle.net/AwH9S/

당신은 스크롤바의 크기를 결정하는 몇 가지 자바 스크립트를 구현 할 수 있으며 여부는 존재입니다.

+0

완벽하게 작동했습니다. 스크롤을 아래쪽으로 치면 이미지를 감추기 위해 if (elem [0] .scrollHeight - elem.scrollTop() == elem.outerHeight()) {// 이미지 기능 숨기기}를 사용했습니다. 감사 –

0

일부 HTML/CSS를 공유 할 수 있습니까? 당신의 CSS를

#theDiv { 
    position: absolute; 
    bottom: 0; 
} 

에서 그것에

는 부모가

position: relative; 
0

당신은이 방법으로 일을하려고하는 일을 할 수 없습니다 제공합니다. 상대방과 절대적인 위치의 제안은 부모 div의 맨 아래에있는 img를 "초기화"하는 데 도움이되지만, "scrollHeight"(올바른 사람이라면 올바른 사람이 될 것입니다. 여기에 올바른 vocab을 사용하고 있는지 확실하지 않습니다.) 변경, 일명 사용자가 div를 스크롤하면 절대적으로 배치 된 div가 이러한 절대 위치를 유지하므로 내용이 스크롤됩니다. 고정 된 위치 지정은 화면에 고정 될 것이므로 가장 가까운 부모의 위치로 고정되지 않으므로 사용할 수 없습니다. 원하든 원하지 않든간에, 가장 쉬운 방법은 두 div가 포함 된 parernt를 설정하는 것입니다. 하나는 스크롤 가능한 콘텐츠 용이고, 1 개는 이미지 용이며, 2는 위치를 지정하여 두 번째 "1 번째"의 하단에 붙어 나타납니다.

관련 문제