使div仅在另一个可滚动div内固定

Question

我的页面结构如下：

<div id="header"></div>
<div id="messages"></div>
<div class="content">
    <div id="sidebar"></div>
    <div id="content"></div>
    <div id="other_stuff"></div>
</div>

标头是页面的标头。 邮件div是我推送邮件的地方。 有时它充满了，有时它是空的。 侧栏是导航菜单。 内容是可滚动的长div。 其他东西是其他东西。

滚动内容时，我需要在左侧的页面中固定边栏。 但是，侧栏绝对不能覆盖邮件和标题。 换句话说，当我向下滚动页面时，标题和消息将正常滚动内容。 但是，当我向上滚动页面时，侧栏不应覆盖消息和标头div的内容。

我使用过CSS属性position: fixed; 为此，但使用此属性，边栏会覆盖消息。 如何使用CSS和javascript / jQuery修复此问题？

Answer 1

如果我答对了，您希望侧边栏从特定点开始固定。

这可以通过jQuery实现。 有很多方法，至少我知道3种。 这是我在类似情况下使用的纯jQuery版本（如果您不想嵌入其他外部JS库）

jQuery(document).ready(function ($) {
    $fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
    $(window).scroll(function(){
            if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
            {
                $fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
            }
    });
});

其他使用其他JS库的方式也可以使用，我知道其中两个：

1） jQuery Waypoints

2） stickyjs.com

希望能有所帮助。

Answer 2

如果您可以使用jsfiddle则很好，否则我认为类似以下代码的内容可以为您提供帮助。 固定标题和消息的高度，并在标题和边栏上增加标题和消息的总高度。

#header, #messages {
height:3em;

} .content #sidebar { position:fixed; margin-top:3em; width:5em; } .content #sidebar { position:fixed; margin-top:3em; width:5em; }

.content #content,.content #other_stuff{
width:3em;
margin-left:5em;

}