Хаки и Скрипты Next Generation CMS

Заголовок, который прилипает к верхней части окна просмотра

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

Можешь почитать и вот эту статейку "Добавляем статус аськи на сайт"

Опрос

Ваше мнение

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

Последние комментарии

Теги

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

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [11]
  • Гости: [11]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 18
  • Генерация страницы: 0.085сек
  • Потребление памяти: 4.913 Mb 
  •   яндекс.ћетрика