Twitter Bootstrap を使用してサイトをデザインするのは初めてで、ページが下にスクロールされたときにロゴのサイズを変更するためのアドバイスが必要です。ここで実際の例を参照してください - http://opheliadesign.com/index_dev.php
まず、ロゴが配置されているナビゲーション バーの HTML は次のとおりです。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/index_dev.php" class="brand"></a><img src="img/logo-dark-small.png" alt="Ophelia Design" style="float:left; margin: 5px;"/>
<ul class="nav" style="float: right;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
そしてCSS...
body {
padding-top: 120px;
padding-bottom: 40px;
}
div.navbar-inner {
background: #282828 !important;
}
#header {
overflow: auto;
background: #a99472;
padding: 4px;
border-radius:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
#header small {
color: #334B2A;
}
そして最後に、ロゴのサイズを変更するために使用しているjQuery -
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
if (scrolled > 48) {
$("#logo").css({'height': '68px'});
} else {
$("#logo").css({'height' : '108px'});
}
})
私の質問 - これを実装するより良い方法はありますか? 特に、レスポンシブな Bootstrap デザインにより適したものはありますか? また、css を使用したサイズ変更と、src
属性を変更して別の img をロードすることについての考えをいただければ幸いです。