2482
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css html
- Демо:
Всем привет. Сегодня просматривая сайты наткнулся на интересный эффект, когда при скролинге новости название прилипает к верху окна браузера.
Ну не долго думая слямзил, вдруг кому пригодится,можно прикрутить и на менюшку.
Итак приступим , открываем файл main.tpl или fullnews.tpl и в зависимости от файла добавляем или редактируем под себя
Код:
<header>
<h1>Просто заголовок</h1><nav>А может и менюшка</nav>
</header>
<p>куча инфы</p>
В стили шаблона добавляем
Код:
header {
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #5C5E6380;
color: #fff;
font-family: 'PT Sans', sans-serif;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
position: fixed;
font-size: 24px;
line-height: 48px;
height: 48px;
width: 100%;
background: #50463699;
text-align: left;
padding-left: 20px;
}
/* Вспомогательные стили */
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
header { display: block; }
body {
background-color: #f5f5f5;
line-height: 1;
text-align: center;
}Ну нам нужен обязательно подключенный jquery,и если он уже подключен повторно подключать не нужно
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Код:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
</script>
header- можете поменять на класс div-a или заменить на другой тег, главное не нарушить структуру .
Вот и все ,пользуемся.
Можешь почитать и вот эту статейку "Хак- Для тех у кого тёмный фон."
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.