Доброго времени суток.
Возник один вопрос, возможно ли реализовать движение логотипа и меню следующим образом посредством html и css, или необходимо вмешательство js.
При прокрутке страницы, логотип (ну или другой любой элемент из хедера) опускается до уровня меню, и уже вместе с меню, двигается дальше до определённого уровня (чтобы не вылазило всё это на достаточно большой футер)
Пробывал разное позиционирование и вложенность элементов, и ничего из этого не получилось.
Рассчитываю на какой-нибудь намёк для решения данной задачи, или, если необходим js, какую нибудь ссылку с подсказкой (так как с js почти не знаком, т. е. написать не смогу, но вставить и подправить стили в состоянии)
Ниже код черновика без моих экспериментов (reset.css подключён, но его не выкладываю)
html
<body>
<div class="header">
<div class="logotip">
<h1>логотип</h1>
</div>
</div>
<div class="menu">
</div>
<div class="content">
<div class="leftcol">
</div>
<div class="rightcol">
</div>
<div class="maincol">
</div>
</div>
<div id="footer">
</div>
</body>
css
.header {
width: 100%;
background: #F00;
height: 150px;
}
.logotip {
width: 80px;
height: 80px;
background: #f0f;
}
.menu {
background: #000;
height: 20px;
margin: 0 100px 0 100px;
top: 130px;
}
.content {
}
.leftcol {
width: 100px;
float: left;
background: #0F0;
height: 500px;
}
.rightcol {
width: 100px;
float: right;
background: #000066;
height: 500px;
}
.maincol {
margin: 0 100px 0 100px;
background:#999999;
height: 1500px;
}
Извините, не нашёл он-лайн редактора, чтобы дать ссылку на код, пришлось писать в сообщении, просто, редко использую форумы для задания вопросов.
Возник один вопрос, возможно ли реализовать движение логотипа и меню следующим образом посредством html и css, или необходимо вмешательство js.
При прокрутке страницы, логотип (ну или другой любой элемент из хедера) опускается до уровня меню, и уже вместе с меню, двигается дальше до определённого уровня (чтобы не вылазило всё это на достаточно большой футер)
Пробывал разное позиционирование и вложенность элементов, и ничего из этого не получилось.
Рассчитываю на какой-нибудь намёк для решения данной задачи, или, если необходим js, какую нибудь ссылку с подсказкой (так как с js почти не знаком, т. е. написать не смогу, но вставить и подправить стили в состоянии)
Ниже код черновика без моих экспериментов (reset.css подключён, но его не выкладываю)
html
<body>
<div class="header">
<div class="logotip">
<h1>логотип</h1>
</div>
</div>
<div class="menu">
</div>
<div class="content">
<div class="leftcol">
</div>
<div class="rightcol">
</div>
<div class="maincol">
</div>
</div>
<div id="footer">
</div>
</body>
css
.header {
width: 100%;
background: #F00;
height: 150px;
}
.logotip {
width: 80px;
height: 80px;
background: #f0f;
}
.menu {
background: #000;
height: 20px;
margin: 0 100px 0 100px;
top: 130px;
}
.content {
}
.leftcol {
width: 100px;
float: left;
background: #0F0;
height: 500px;
}
.rightcol {
width: 100px;
float: right;
background: #000066;
height: 500px;
}
.maincol {
margin: 0 100px 0 100px;
background:#999999;
height: 1500px;
}
Извините, не нашёл он-лайн редактора, чтобы дать ссылку на код, пришлось писать в сообщении, просто, редко использую форумы для задания вопросов.
