jQuery：根据窗口滚动位置固定到页面顶部后动画容器宽度

Question

天哪，这可能太荒谬了，但我已经摆弄了几个小时，似乎无法弄清楚如何做到这一点。

让我们从一些 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'});
    });
});

我的问题是我似乎无法让这两个概念无缝地协同工作。我确实考虑过可能会使用某种 hack，通过在容器后面创建一个空的 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>

（附注 - 我知道语义很垃圾，哈哈。不过，这纯粹是实验性的。谢谢。）

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/