jQuery：根據窗口滾動位置固定到頁面頂部後的動畫容器寬度

Question

Jeez，這可能很荒謬，但我一直在擺弄幾個小時，似乎無法弄清楚如何做到這一點。

讓我們開始與一些CSS：

#wrapper { 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 960px; 
} 

#wrapper .block { 
    width: 920px; 
    height: 690px; 
} 

#wrapper .container { 
    background-color: #000; 
    width: 920px; 
    height: 80px; 
} 

#wrapper .container div { 
    margin: 20px auto 0; 
    width: 510px; 
    height: 35px; 
} 

很簡單。這個容器位於一個塊的下面，並在其中嵌入另一個小容器（這可能無關緊要，但我將它包括在內以防萬一它是預兆），並且它都在一個大的頁面包裝器中。所以基本上，在滾動頁面的某個點後，我想讓.container變成固定到頁面的頂部並擴展到窗口的寬度。我也希望.container恢復到原來的狀態，如果所述點再次在相反的方向交叉。

我已經實現了固定用jQuery：

$(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() >= 690) $('.container').css({ 
      'position' : 'fixed', 
      'top' : '0', 
      'left' : '50%', 
      'margin-left' : '-460px' 
     }); 
     if ($(this).scrollTop() < 690) $('.container').removeAttr('style'); 
    }); 
}); 

對於我的生活，雖然，我無法弄清楚如何擴大與收縮的.container寬度表示邏輯，同時保持原有的一切集中並沒有任何「小故障」或延遲。其效果是，當頁面上的滾動位置通過（或在）690px時，容器的寬度從其原始寬度的中心/末端擴展到頁面的寬度，並且當滾動位置在所述值之前。

在基本層面上，這是我的理解：

$(function() { 
    $('window').scroll(function() { 
     if ($(this).scrollTop() >= 690) $('.container').animate({'width' : '100%'}); 
     if ($(this).scrollTop() < 690) $('.container').animate({'width' : '920px'}); 
    }); 
}); 

我的問題是，我似乎無法得到這兩個概念，以無縫協作。我確實考慮過可能使用某種黑客方法，在容器後面放置一個空的div，一旦滿足這些滾動位置條件就會變成動畫，但我無法得到像看起來那麼簡單的東西。

爲了方便起見，我也說幹就幹，做什麼，我瞄準的快速可視化表示，在情況下，我在我的解釋錯誤：

有什麼我應該修改/添加/刪除在我的CSS或jQuery，或兩者？我是否應該考慮用它來說，並嘗試用CSS3轉換完成相同的效果？或者這會讓事情變得更加複雜？我瘋了，以爲看起來如此簡單的事情可能如此困難，如果事實證明這是一個我忽略的非常簡單的解決方案，哈哈哈，我可能會翻蓋。

任何幫助/反饋/任何將不勝感激。謝謝！

更新

一些HTML：

<div id="wrapper"> 
    <div class="block">Some content</div> 
    <div class="container"> 
     <div>A few navigation links</div> 
    </div> 
    <div class="main">Main content</div> 
</div> 

（。PS - 我知道的語義是垃圾，哈哈這是純粹的實驗，但由於）

Answer 1

嘗試將()添加到.scrollTop()。

注意，應用css的預期結果不完全確定嗎？

$(function() { 
 
    $(window).scroll(function() { 
 
     if ($(this).scrollTop() >= 300) { 
 
      $(".container") 
 
      .stop(true) 
 
      .css("position", "fixed") 
 
      .animate({ 
 
       "top": "0", 
 
       "left": "50%", 
 
       "margin-left": "-460px" 
 
      }, 100); 
 
     }; 
 
     if ($(this).scrollTop() < 300) { 
 
      $(".container").stop(true) 
 
      .css({ 
 
       "position": "relative", 
 
       "margin-left": "0px", 
 
       "left": "0" 
 
      }); 
 
     }; 
 
    }); 
 
});

#wrapper { 
 
    background-color: #ddd; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
    width: 960px; 
 
} 
 
#wrapper .block { 
 
    background-color: #aaa; 
 
    width: 920px; 
 
    height: 300px; 
 
    display: inline-block; 
 
} 
 
#wrapper .container { 
 
    background-color: #000; 
 
    width: 920px; 
 
    height: 80px; 
 
    display: inline-block; 
 
} 
 
#wrapper .container div { 
 
    background-color: #444; 
 
    margin: 20px auto 0; 
 
    width: 510px; 
 
    height: 35px; 
 
    transition: all 100ms ease; 
 
} 
 
#wrapper .main { 
 
    background-color: #eee; 
 
    width: 920px; 
 
    height: 700px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="wrapper"> 
 
    <div class="block">Some content</div> 
 
    <div class="container"> 
 
     <div>A few navigation links</div> 
 
    </div> 
 
    <div class="main">Main content</div> 
 
</div>

的jsfiddle http://jsfiddle.net/eby5ygLy/2/