javascript - 使 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>

Header 是页面的头部。Messages 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

希望对您有所帮助。