부트 스트랩 3.0 어 픽스

Question

부트 스트랩 3.0과 부착을 사용하여 오른쪽 상단 열을 (스크롤 할 때) 창 상단에 고정시키고 싶습니다.

.right-hand-bar.affix { 
    width: 390px; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    margin-top: 110px; 
} 

예 here에서 몇 이상한 일들이 일어나고있는 것을 볼 수 있습니다 :

<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">

이것은 CSS입니다 :

이

은 요소의 HTML입니다.

• 고정 된 .right-hand-bar (인기 블로그 포스트 등)가 화면의 오른쪽으로 이동합니다 (고정 된 위치 고정으로 인해). 사이트가 반응 적이어서 정확한 위치 정보를 엉망으로 만들고 싶지 않습니다.
• 고정 막대가 주 용기 바깥으로 점프합니다.
• 저는 고정 요소에 폭을 추가해야했습니다. 고정 요소에는 폭넓게 사용하지 않아야합니다 (응답 성으로 인해).
• 고정 요소의 아래쪽이 바닥 글의 맨 위에 올 때 (또는 바닥 글의 오프셋 값) 페이지를 스크롤하는 것을 중지하고 싶습니다.

누구에게 도움을 줄 수 있습니까?

미리 감사드립니다.

Answer 1

.right-hand-bar.affix 스타일의 미디어 쿼리를 래핑하므로 데스크톱 버전에만 적용됩니다. 어쨌든 작은 화면에 고정 되길 원하지는 않습니다.

.row의 스타일에 position: relative;을 추가하면 .right-hand-bar은 페이지 전체가 아닌 해당 컨테이너에 상대적으로 부착됩니다.