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

非常简单。这个容器位于一个块下面，并在其中嵌入另一个小容器（这可能并不重要，但我把它包括在内以防它是一个预兆），而且它都在一个大的里面醇＆＃39;页面包装器。所以基本上，在向下滚动页面之后，我希望.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的宽度，同时保持一切中心并且没有任何＆＃34;故障＆＃34 ;或延误。那么，效果是，在页面上的滚动位置经过（或处于）690px之后，容器的宽度从其原始宽度的中心/末端扩展到页面的宽度，并且还原为当滚动位置在所述值之前时。

在基本层面上，这是我理解的：

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

我的问题是，我似乎无法将这两个概念无缝地协同工作。我确实考虑过可能使用某种类型的黑客，通过在容器后面制作一个空的div，并在满足那些滚动位置条件后变为动画，但我不能得到看似简单的东西。工作要么。

为了方便起见，我也继续前进，快速直观地展示了我的目标，以防我在解释中出错：

Example of jQuery expansion/retraction effect with fixation conditions

我的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>

（P.S。 - 我知道语义是垃圾，哈哈。但这纯粹是实验性的。谢谢。）

Answer 1

尝试将// I assume "2" is the node ID as seen above // replace tree-container-here with your ID (the one you used to create the tree) window.jQuery('#tree-container-id-here').jstree(true).open_node('2');添加到()。

注意，并非完全确定应用.scrollTop()的预期结果？

＆＃13;

css

＆＃13;

$(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"
          });
        };
    });
});

＆＃13;

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

＆＃13;

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

jQuery：根据窗口滚动位置

1 个答案: