SlideDown/Up, оживляя высоту с помощью jquery

Question

Я хочу добиться эффекта, подобного эффекту заголовка на ibm.com. Сам заголовок фиксирован. Когда вы прокручиваете вниз, заголовок становится меньше. Когда вы прокручиваете назад, он получает нормальную высоту.

Это, как я попробовал:

$(document).ready(function() {   

    $(window).scroll(function(e){ 
     var scrollTop = $(window).scrollTop(); 
     if(scrollTop > 50){ 
       $('.main_nav').animate({ 
       height:"30px" 
      }); 
     } 
    }); 

}); 

Это делает заголовок получить меньше. Но как я могу оживить его до нормальной высоты? Любые другие идеи?

Answer 1

здесь смотрите: http://jsfiddle.net/Xvqqb/6/

Я слегка подправил свой код. Я отменяю анимацию, если пользователь быстро прокручивается вверх и вниз. Установите положение заголовка на фиксированное.

JS

var header = $('#header') 

$(window).scroll(function(e){  
    var scrollTop = $(window).scrollTop(); 
    if(scrollTop > 50){ 
     header.stop().animate({height:"30px", queue: false}); 
    } 
    else{   
     header.stop().animate({height:"50px", queue: false}); 
    } 
});​ 

CSS

#header { 
    height:50px; 
    width:716px; 
    position:fixed; 
    left:0px; 
    top:0px; 
    background:red; 
    z-index: 900; 
} 

Html

<div id="header"></div> 
<div id="bodyContent"> 
    <div style="height:1000px"></div>  
</div> 

Answer 2

if(scrollTop > 50){ 
     $('.main_nav').animate({ 
      height:"30px" 
     }); 
    }else{ 
     $('.main_nav').animate({ 
      height:<OLD HEIGHT> 
     }); 
    } 

Если исходная высота не фиксирована, вы можете получить первоначальную высоту и использовать data, чтобы сохранить его до усадки его.

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

Answer 3

это логотип, который вы хотите получить меньше? вы можете использовать jquery-ui для анимации с css-классом, чтобы изменить высоту и другие элементы (например, скрыть блок поиска)

, но если его высота Джеймса сделала, но вам не нужно хранить его в данные на элементе:

$(document).ready(function() { 
    var main_nav = $(".main_nav"), 
     oldHeight = main_nav.height(), 
     scrollUpTo = 30, 
     hideHeight = 50, 
     w = window; 

    $(window).scroll(function(e){ 
     var scrollTop = $(w).scrollTop(); 
     setTimeout(function() { 
      if(scrollTop > hideHeight && main_nav.height() !== scrollUpTo){ 
       main_nav.stop(/*clearQueue*/true).animate({ height: scrollUpTo }); 
      } else if(scrollTop < hideHeight && main_nav.height() !== oldHeight) { 
       main_nav.stop(/*clearQueue*/true).animate({ height: oldHeight }); 
      } 
     }, 100); 
    }); 

}); 

если высота не равна старой высоте и scrollTop меньше 50, то оживить его один раз.

вы также можете использовать тайм-аут, чтобы вы не запускающие все время, когда вы прокрутку (его рекомендуется использовать тайм-аут на событии прокрутки)

но исправить все дочерние элементы main_nav моя догадка заключается в том, что jquery-ui switchClass http://jqueryui.com/docs/switchClass/ может исправить это.