具有CSS轉換的固定標頭

Question

轉換時出現以下問題：

的CSS

header {
    display:block;
    width:100%;
    height:120px;
    background-color:#000;
    transition: all 1s ease 0s;
}

#content {
    height:800px;
    border:1px solid #000;
}

.headerSticky {
    position:fixed;
    top:0;
    z-index:1000;
    transition: all 1s ease 0s;
}

的HTML

<header>lala</header>
<div id="content">
    <span class="test">test</span>
</div>

Java腳本

$('.test').waypoint(function(direction) {
  if(direction == 'down')
    $('header').addClass('headerSticky');
  else
    $('header').removeClass('headerSticky');
});

http://jsfiddle.net/SwLdb/

我有一個標題，我想當滾動到達一個項目時（使用jquery waypoint），該標題固定在頂部。 但是我希望通過過渡使其看起來不錯。

可能嗎？

謝謝

Answer 1

這樣做的一個好方法可能是將標頭設置為動畫所需的位置，該位置將為$(window).scrollTop(); 然后將類更改為headerSticky。 用戶將無法注意到它，但是您將獲得所需的效果。

  if(direction == 'down')
  {
    $('header').animate({top:$(window).scrollTop()},500,function()
    {
        $('header').addClass('headerSticky',500);
    }
  }
  else
    $('header').removeClass('headerSticky',500);