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

Можешь почитать и вот эту статейку "Теги ins"

mistakes

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

Ваше мнение

Какие темы вам интереснее?
Результаты

----