2

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

4

0 回答 0