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/