Question

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

因此，尽管我可以组织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'); 
                } 
        } 
});

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

1 个答案: