• Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты JavaScript, Примеры на JavaScript, полезные исходники, подобное » Фиксированная панель, всегда сверху, как в яндексе (принцип) (Скрипт фиксированной панели, просто скрипт, без примеров)
Фиксированная панель, всегда сверху, как в яндексе (принцип)
Дата: Воскресенье, 12.05.2013, 02:14 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 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


 
Дата: Пятница, 17.05.2013, 02:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 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


 
Дата: Пятница, 17.05.2013, 03:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 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


 
Дата: Пятница, 17.05.2013, 04:07 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 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


 
Скрипты и коды для юкоз - Форум аццкого кодера » Исходники, Скрипты, Коды, Шаблоны, Примеры, Прикрепления, Инструменты и тп. » Скрипты JavaScript, Примеры на JavaScript, полезные исходники, подобное » Фиксированная панель, всегда сверху, как в яндексе (принцип) (Скрипт фиксированной панели, просто скрипт, без примеров)
  • Страница 1 из 1
  • 1
Поиск:


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