粘性侧边栏，带有高度变化的标题？

Question

我正在尝试实现某些目标，但无法使其与现有的 jQuery 插件一起使用。我想要达到的目标如下：

打开网站时，我有一个侧边栏，距顶部约 200 像素。上面是我的标题，标题下面是一个菜单（当它到达菜单顶部时会粘住）。

在此之下，我希望侧边栏 div（我们称之为 .sidebar）在到达顶部时也会变得粘滞（减去菜单，它应该始终位于页面顶部）。

为了让事情更清楚一点，这是一个简单的 HTML 示例：

    <div class="header"></div>
    <div class="menu">always sticky through a jQuery sticky plugin</div>
    <div class="wrapper">
        <div class="sidebar">the part that SHOULD be sticky</div>
        <div class="content">the content that SHOULD scroll</div>
    </div>

显然，.sidebar 和 .content 是相邻的。

我想我忘记了一个非常简单的解决方案，但我无法弄清楚。

Answer 1

我想我已经完成了你所说的事情。这是你想要做的吗？

http://dropthebit.com/demos/stickyfloat/stickyfloat.html

看起来代码现在位于： https://gist.github.com/chaupt/728487

我不得不稍微修改一下，但侧边栏将保持固定，直到您滚动并且窗口顶部接触到您要随页面滚动的元素的顶部。

编辑：

好的，我想我明白你的意思了。试试这个：

CSS：

    #header {background-color:#0000ff; color:#fff; height:50px; text-align:center; width:100%; z-index:10; }

    #wrapper {margin:0; padding:0; position:relative; z-index:1; }

    #menu {background-color:#000000; clear:both; color:#fff; height:25px; padding:5px; position:relative; width:100%; z-index:10; }

    #sidebar {background-color:#ff0000; color:#fff; float:left; margin:35px 0 0 0; position:relative; width:6em; }

    #content {background-color:#ff00ff; color:#fff; margin:0 0 0 6em; padding:35px 0 0 .5em; }

    p {margin:0 0 .5em  0; }

HTML：

<div id="header">Header</div>
<div id="wrapper">
    <div id="menu">Menu</div>
    <div id="sidebar">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        <p>Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</p>
        </p>
    </div>
</div>

然后从上面的 gisthub 位置添加 stickyFloat.js 文件，并添加：

<script type="text/javascript">
    $(document).ready(function() {
        $("#menu").stickyfloat({ duration: 400 });
        $("#sidebar").stickyfloat({ duration: 400 });
    });
</script>

我想这就是你所说的：http://jsfiddle.net/qVwTY/2/

顶部菜单固定在窗口顶部，侧边栏固定在窗口底部。我没有在我拥有的所有浏览器中测试它，但它可以在最新版本的 Firefox 和 Chrome 中运行。

希望这会有所帮助。