Jquery 在Twitter引导页面上滚动时调整标题徽标的大小

我第一次尝试使用Twitter引导设计一个网站，在页面向下滚动时，我可能需要一些关于调整徽标大小的建议。请参见此处的工作示例-

首先，这里是徽标所在导航栏的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>

最后，我使用jQuery调整徽标的大小-

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > 48) {
        $("#logo").css({'height': '68px'});
    } else {
        $("#logo").css({'height' : '108px'});
    }
})

我的问题是，有没有更好的方法来实现这一点？尤其是一款更适合我的灵敏引导设计的产品？此外，考虑使用css调整大小，而不是通过更改其

src

属性加载另一个img，将不胜感激

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > 48) {
        $("#logo").css({'height': '68px'});
    } else {
        $("#logo").css({'height' : '108px'});
    }
})