Question

我第一次使用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的想法将不胜感激。

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

0 个答案: