브라우저가 너무 작 으면 고정 위치 지정이 이미지를 자릅니다.

Question

페이지의 중간에 오른쪽 열을 따라 긴 이미지를 실행하려는 페이지가 있습니다. 이 이미지를 약 300 픽셀 아래로 밀어내는 내용 앞에 페이지에 헤더가 있습니다. 나는 페이지를 아래로 스크롤 할 때 사용자가 따라갈 수 있도록 고정 위치 지정을 사용하고 있습니다.

크기가 더 작고 이미지의 맨 아래에있는 브라우저를 사용할 때까지 제대로 작동합니다. 페이지를 아래로 스크롤하면 이미지가 여전히 따라 오지만 헤더가 보이지 않아도 이미지를 수용 할 수있는 충분한 공간이 있어야합니다.

스크롤 할 때 브라우저를 고정 할 때 위치를 고정 할 수있는 방법이 있습니까?

내가 지금 가지고있는 전부입니다. 다음은 항상 페이지 하단에 고정 유지됩니다

<div id="right_image" style="margin-top:0; position:fixed; width:150px; height:700px; display:block; border:none;"></div> 

Answer 1

당신이 bottom:0px (또는 다른 값)을 지정하는 경우 : 난 아직 CSS를 주위에 내 머리를 포장하고있어, 단지 그것의 해결책을 찾을 수 없습니다 바닥에서 자르지 않을 것이다.

편집 - 코멘트에서 논의 된 일을 할 수있는 페이지에 다음 스크립트를 추가 (당신이 이미 가지고있는 경우에 당신은 JQuery와 참조를 제거 할 수 있습니다) :

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> 
<script language='javascript' type='text/javascript'> 
    $(document).scroll(function() { 
     if($(this).scrollTop()==0) $('#right_image').css('bottom', ''); 
     else $('#right_image').css('bottom', '0px'); 
    }); 
</script> 

날이 있으면 알려주세요 작품