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

Question

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

因此，尽管我可以组织航点，但我无法让网站在页面的直接中心加载徽标（无论屏幕大小）。任何帮助将不胜感激！\

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