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;
}

很简单。这个容器位于一个 block 下，并在其中嵌套另一个小容器(这可能无关紧要，但我将其包括在内以防万一它是一个预兆)，并且它都在一个大的 ol' 页面包装器中。所以基本上，在向下滚动页面的某个点后，我希望 .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/