끈적 끈적한 요소가 페이지의 중심에서 시작됩니까?

Question

페이지의 바로 중앙에 로고를 표시하는 웹 사이트를 만들었습니다. 현재 div의 위치는 고정되어 있습니다. 로고에는 이미지 맵도 포함됩니다. 제가 원했던 것은 절대적인 것입니다. 사용자가 아래로 스크롤하면 로고는 상단에서 약 20 픽셀에 도달하고 고정 될 것입니다. Waypoint와 매우 유사합니다.

Waypoint를 구성 할 수는 있지만 화면 크기에 관계없이 페이지의 중심에 로고가로드되도록 사이트를 가져올 수 없습니다. 어떤 도움을 크게 감상 할 수있다 \

내 HTML을!

<div class="logo"> 
<img src="images/logo.png" /> 
</div> 

내 CSS는 :

.logo { 
    width: 351px; 
    height: 185px; 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    margin-left: -175px; 
    margin-top: -92px; 
    text-align:center; 
    overflow:hidden; 
    z-index: 900; 
} 

Answer 1

당신은 창 높이의 크기를 잡아해야합니다. 이것을 JS에 추가 한 다음 $('.logo').centerScreen 형식으로 사용할 수 있습니다.

$(document).ready(function() { 
     jQuery.fn.centerScreen = function(loaded) { 
       var obj = this; 
       if(!loaded) { 
         obj.css('top', $(window).height()/2- 
           this.height()/2); 
         obj.css('left', $(window).width()/2- 
           this.width()/2); 
         $(window).resize(function() 
           { obj.centerScreen(!loaded); }); 
       } else { 
         obj.stop(); 
         obj.animate({ top: $(window).height()/2- 
           this.height()/2, left: $ 
           (window).width()/2-this.width()/2}, 200, 'linear'); 
       } 
     } 
});