2013-12-10 227 views
0

我想更改標題的高度並在滾動中爲其添加類。不過,我想用jQuery animate(或類似的效果)順利地做到這一點。 這個想法是使標題粘在滾動條上,並在粘貼形式時從其中刪除子標題。這就是爲什麼當它正在滾動時淡入subheader。有沒有更好的方法來做到這一點?jQuery在滾動時順利地更改css屬性

我已經設法用下面的代碼來做到這一點,但是如果你看到演示,css的變化不是平滑的,它不知何故會出現問題。

演示:

http://jsfiddle.net/kcW9a/

下面的代碼:用於固定頭部

var height = $('header').outerHeight(); 

$(window).scroll(function() { 
    if($(this).scrollTop() > height) 
     { 
      $("header .subheader").fadeOut(200); 
      $('header').addClass('stick'); 
      $('header').stop().animate({'height' : '50'}, 200); 

     }else if($(this).scrollTop() <= height) 
     { 
      $('header').removeClass('stick'); 
      $("header .subheader").fadeIn(200); 
      $('header').stop().animate({'height' : '100'}, 200); 
     } 
}); 
$(window).scroll(); 
+0

嘗試的CSS的位置是:固定的;寬度:100%; – 2013-12-10 11:51:21

回答

1

更改CSS樣式與粘頭效果

header{ 
    height: 100px; 
    background: green; 
    position:fixed; 
    width:100%; 
} 
0
$(window).scroll(function() { 
    if($('#main').offset().top === 0) { 
    $('.subheader').fadeIn(600); 
    $('#main').stop().animate({ height: '100px' }, 300).removeClass('stick'); 
    } 
    else { 
    $('.subheader').fadeOut(1); 
    $('#main').stop().animate({ height: '50px' }, 300).addClass('stick'); 
    } 
});