粘性元素从页面的直接中心开始？

Question

我已经创建了一个网站，该网站在页面的直接中心显示徽标。目前，div的位置是固定的。该徽标还包括一个图像映射。我希望它是绝对的，当用户向下滚动时，徽标将从顶部到达大约20px并且将变得固定。与Waypoint非常相似。

所以，虽然我可以组织Waypoints，但无法将网站加载到页面的直接中心（无论屏幕大小）。任何帮助将不胜感激\

我的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'); 
       } 
     } 
});