크기 조정이 가능한 고정 위치 요소; 응답이 상대적으로 배치 된 콘텐츠

Question

나는 고정 된 div #summary 높이가 변경되었습니다. 항상 창 상단에 표시해야합니다. 그 밑에 나는 내용이 #catalogueContainer인데, 위의 고정 된 div가 높이를 바꿀 때 다시 위치를 잡아야한다. 창 스크롤 막대를 사용하여 스크롤 할 수 있어야합니다.

나는 창 상단에있는 #summary 사업부를 유지하는 유일한 방법은 그것을 고정 된 위치를 제공하는 것입니다 이해합니다. 이 일을 할 때 #catalogueContainer 그것에 아무런 관계가 없으므로 #summary 높이를 변경하면 CSS를 사용하여 다시 위치를 지정할 수 없습니다. 내가 생각할 수있는 유일한 방법은 요약 크기 변경을 청취하고 #catalogue의 최상위 위치를 지정하는 자바 스크립트를 사용하는 것입니다.

1. 이 소리가 가장 효율적인 솔루션합니까? 아래 코드와주의 사항.
2. Chrome에서 창을 스크롤하면 #summary의 배경 이미지가 남지만 다른 모든 콘텐츠는 스크롤 할 때 브라우저 창의 상단에 고정되어 있습니다.

이 고정에 대한 어떤 제안?

#summary { 
    position:fixed; 
    top:0px; 
    left:275px; 
} 

#summary

내의 소자들은 상당한 재 및 높이를 변경했다. 이것은 항상 창 상단에 표시해야합니다.

#right { 
    position:relative; 
    left:275px; 
    top:300px; 
} 

#right

모두 아래의 컨테이너 요소이다.

모두 같은 장소에 #catalogueContainer 수많은 카탈로그가 있습니다,하지만 한 번에 볼 수 있습니다.

Answer 1

당신은 (당신이 다음 상단에 위치) 컨테이너의 요약 및 카탈로그를 배치 할 수 있습니다 내부 position:absolute 요소가 있기 때문에

#catalogueOne { 
    position:relative; 
} 

#catalogueOne 요구 relative 수 있습니다. 그렇다면 그들은 단지 100 % 너비와 부유가 필요합니다. 요약의 높이가 변경되면 카탈로그가 위 또는 아래로 밀려납니다.

또한 jQuery를 사용하고 요약의 높이에 따라 카탈로그를 배치 기능을 사용할 수 있습니다. 둘 다 고정 된 위치에 있어야합니다. 내 설명에 대한