Jquery 相对于父容器定位固定div

我想在右侧边栏添加一个

div

，它是固定的，并且与父容器相关，就像在这里看到右侧边栏一样。这正是我想要的我的网站

我尝试了很多东西，但没有得到任何结果这是我的代码

<div id="parent_div">
 <div id="fixed_div">
  Some Content here.....
 </div>
</div>


parent_div
{
 float:right;
 width:300px;
 margin-top:50px;
 margin-right:5px;
 position:relative;
 border:1px solid red;
}

fixed_div
{
 position:fixed;
 width:300px;
 background-color:#084B8A;
 padding:10px;
 box-sizing:border-box;
}

这里有些内容。。。。。
家长组
{
浮动：对；
宽度：300px；
边缘顶部：50px；
右边距：5px；
位置：相对位置；
边框：1px纯红；
}
固定分区
{
位置：固定；
宽度：300px；
背景色：#084B8A；
填充：10px；
框大小：边框框；
}

---

如何在跨浏览器的css中实现这一点，如果在css中无法实现，如何在jquery或javascript中使用jquery

scrollTop

。请查看以下代码

$（窗口）。滚动（函数（）{
$（“#theFixed”）.css（“top”，Math.max（0250-$（this.scrollTop（））；
});

固定Div
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
您可以使用position:sticky

或者使用函数

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".sidebar").addClass("active");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $(".sidebar").removeClass("active");
    }
});

你有一个你想要的例子。正常的做法是弄清楚他们是如何做你想做的事情的。您可以通过查看浏览器的开发工具并查看它们使用的CSS/HTML/JavaScript来实现这一点；顶部：0
-否则按照示例页面上的操作-更新CSS onscroll元素。