Question

我正在尝试实现某些功能，但我无法使用现有的jQuery插件。我想要实现的目标如下：

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

在此之下，我想要侧边栏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中都有效。

希望这有帮助。

粘贴侧边栏，标题高度变化？

1 个答案: