[ Новые сообщения · Участники · Правила форума · Поиск по форуму · Поиск по сайту ]Форум аццкого кодера

Фильтр по:

Фиксированная панель, всегда сверху, как в яндексе (принцип)

Скрипты JavaScript, Примеры на JavaScript, полезные исходники, подобное

Страница 1 из 1 1
Модератор форума: likbezz

Фиксированная панель, всегда сверху, как в яндексе (принцип) (Скрипт фиксированной панели, просто скрипт, без примеров)

Фиксированная панель, всегда сверху, как в яндексе (принцип)

2013-05-12Дата: Воскресенье, 12.05.2013, 02:14 | Сообщение # 1

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Фиксированная панель, всегда сверху, как в яндексе (принцип)

Код

<script type="text/javascript">
$(document).ready(function(){
var panel=$('#panel'),pos=panel.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top - 10){
panel.removeClass('default').addClass('fixed');
}else if($(this).scrollTop() <= pos.top && panel.hasClass('fixed')){
panel.removeClass('fixed').addClass('default');
}});
});
</script>

В скрипте выше сравниваем положение релативного/статичного блока, с высотой прокрутки. Как в яндексе, блок поиска изначально статичен, но как только упирается в верхний край, становится фиксированным.
Положение блока может быть произвольным.

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v7.html

2013-05-17Дата: Пятница, 17.05.2013, 02:59 | Сообщение # 2

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Вариант попроще.
Сравниваем высоту прокрутки с фиксированной цифрой. Сравнение - больше/меньше.

Код

<script type="text/javascript">
$(document).ready(function(){
var panel=$('#header_bar'),pos=100;
$(window).scroll(function(){
if($(this).scrollTop() > pos){
panel.removeClass('default').addClass('opened');
}else if($(this).scrollTop() < pos && panel.hasClass('opened')){
panel.removeClass('opened').addClass('default');
}});
});
</script>

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v2.html

То же самое, только в профиль:

Код

<script type="text/javascript">
$(document).ready(function(){
var panel=$('#header_bar');
$(window).scroll(function(){
if($(this).scrollTop() > 100){
panel.removeClass('default').addClass('opened');
}else if($(this).scrollTop() < 100 && panel.hasClass('opened')){
panel.removeClass('opened').addClass('default');
}});
});
</script>

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v3.html

2013-05-17Дата: Пятница, 17.05.2013, 03:40 | Сообщение # 3

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

То же самое, но с анимацией - .fadeIn() .fadeOut() - плавное изменение прозрачности

Сравниваем высоту прокрутки с фиксированной цифрой.
Сравнение - больше/меньше.

Код

<script type="text/javascript">
$(document).ready(function(){
var panel=$('#header_bar').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){
panel.removeClass('default').addClass('opened').fadeIn(300);
}else if($(this).scrollTop() < 100 && panel.hasClass('opened')){
panel.fadeOut(500,function(){panel.removeClass('opened').addClass('default')});
}});
});
</script>

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v4.html

2013-05-17Дата: Пятница, 17.05.2013, 04:07 | Сообщение # 4

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

То же самое, но с анимацией - .fadeIn() .fadeOut() - плавное изменение прозрачности + минимальный набор стилей

Код

<style type="text/css">
#header_bar{
      display:none;
      position:fixed;
      width:100%;
      min-width:1000px;
      height:50px;
      z-index:900;
}
#header_bar.opened{
      display:block;
}
</style>

Код

<div id="header_bar">
<div>привет. Я классная верхняя панель.</div>
</div>

Код

<script type="text/javascript">
$(document).ready(function(){
var panel=($(window).scrollTop()>100)?$('#header_bar').show():$('#header_bar').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100 && !panel.hasClass('opened')){
panel.addClass('opened').fadeIn(300);
}else if($(this).scrollTop() < 100 && panel.hasClass('opened')){
panel.fadeOut(500,function(){panel.removeClass('opened')});
}});
});
</script>

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v5.html

Код

<style type="text/css">
#header_bar{
   position:relative;
   height:50px;
   z-index:900;
}
#header_bar.opened{
   top: 0px;
   position:fixed;
   left:50px;
   right:50px;
}
</style>

Код

<div id="header_bar">
<div class="panel">привет. Я классная верхняя панель.</div>
</div>

Код

<script type="text/javascript">
$(document).ready(function(){
var pos=$('#header_bar').offset().top-3,panel=($(window).scrollTop()>pos)?$('#header_bar').addClass('opened'):$('#header_bar');
$(window).scroll(function(){
if($(this).scrollTop() > pos && !panel.hasClass('opened')){
panel.addClass('opened');
}else if($(this).scrollTop() <= pos && panel.hasClass('opened')){
panel.removeClass('opened');
}});
});
</script>

☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v6.html

Фиксированная панель, всегда сверху, как в яндексе (принцип) (Скрипт фиксированной панели, просто скрипт, без примеров)

Страница 1 из 1
1

Мобильная версия