Как сделать так, чтобы логотип следовал за заголовком с фиксированной позицией? - PullRequest
Новая
       47

Как сделать так, чтобы логотип следовал за заголовком с фиксированной позицией?

1 голос
/ 18 сентября 2011

У меня есть заголовок с фиксированной позицией, высота которого составляет около 40px.Он находится выше логотипа высотой 80px в исходном (не прокручиваемом) положении.

Я хочу, чтобы логотип был уменьшен (и помещен в строку заголовка), когда я прокручиваю вниз, передавая оригинальный логотип.Как я мог это сделать?

(я хочу, чтобы это выглядело как TechCrunch )

1 Ответ

1 голос
/ 18 сентября 2011

Я не уверен, что вы точно хотите имитировать эффект в вашей ссылке, но если вы это сделаете, то это пример того, как: см. Демо-скрипку

Таблица стилей: 

#header {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    background: #fff;
}
#content {
    margin-top: 41px;
}
#logo {
    position: relative;
    height: 200px;
    width: 200px;
    top: -41px;
    float: left;
    margin-bottom: -41px;
}

Разметка: 

<div id="header">
    <img src="..." alt="" />
    Menu
</div>
<div id="content">
    <div id="logo">
        <img src="..." alt="" />
    </div>
</div>

Протестировано на Win7 в IE7, IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

...