• 382
  • 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 или заменить на другой тег, главное не нарушить структуру .
Вот и все ,пользуемся.

Можешь почитать и вот эту статейку "будем ставить Lightbox 2"

mistakes

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element