0

ページの中央にロゴを表示する Web サイトを作成しました。現時点では、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;
}
4

1 に答える 1

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'); 
                } 
        } 
});
于 2012-07-27T03:00:51.127 に答える