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

Можешь почитать и вот эту статейку " Видео перекрывает меню в браузере мозила"

mistakes

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

Ваше мнение

Ваше отношение к TWIG
Результаты

----