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库，我知道其中2个：

1）jQuery Waypoints

2）stickyjs.com

希望有所帮助。

Answer 2

如果你可以制作它的jsfiddle它是好的，否则我认为像下面的代码可以帮助你。修复标题和消息的高度，并为侧边栏添加边距，标题和消息的总高度。

#header, #messages {
height:3em;

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

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

}

使div仅在另一个可滚动的div内修复

2 个答案: