Javascript 右侧栏有条件滚动

我有一个侧边栏，我想有条件地滚动。我已经提供了结构。在布局中，左侧和右侧都有很多内容。当用户向下滚动时，让两侧一起滚动。当右部分的底部可见时，我希望右部分停止向上移动，并让左部分继续滚动。当用户向上滚动时，让左侧和右侧部分向上滚动。当右部分的上边缘可见时，我希望右部分停止滚动，让左部分自己继续滚动。如何实现此布局

.main{
宽度：100%；
}
.主体{
宽度：计算（100%-200px）；
背景颜色：粉红色；
显示：内联块；
}
.主体分区{
边缘底部：500px；
}
.侧边栏{
显示：内联块；
宽度：200px；
浮动：对；
背景颜色：黄色；
}
.侧边栏分区{
边缘底部：350px；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
侧栏第1节
侧栏第2节
侧栏第3节
侧栏第4节
侧栏第5节

首先获取侧边栏的高度

$（“#侧边栏”）.height（）

并减少窗口高度

$（window.height（）从边栏高度，然后您可以应用/添加固定类
。固定右栏
。如下例所示：-


var sidebarHeight=$（'#sidebar'）.height（）；
var documentHeight=$（window.height（）；
$（窗口）.on（'scroll'，function（）{
if（$（窗口）.scrollTop（）>sidebarHeight文档高度）{
$（“#边栏”）.addClass（'fixed-right-bar'）；
}
否则{
$（“#边栏”）.removeClass（'fixed-right-bar'）；
}
});
.main{
宽度：100%；
}
.主体{
宽度：计算（100%-200px）；
背景颜色：粉红色；
显示：内联块；
}
.主体分区{
边缘底部：500px；
}
.侧边栏{
显示：内联块；
宽度：200px；
浮动：对；
背景颜色：黄色；
}
.侧边栏分区{
边缘底部：350px；
}
.fixed右栏{位置：fixed；右：0；底部：0；}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
侧栏第1节
侧栏第2节
侧栏第3节
侧栏第4节
侧栏第5节
你是说这个


$（窗口）.on（“滚动”，函数（）{
wh=$（this）.height（），
st=$（this.scrollTop（），
侧面=$（“.Sidebar”），
sh=侧面。外立面（）；
如果（（st+wh）>=sh）{
附加类别（“固定”）；
}否则{
侧面。移除类（“固定”）；
}
})
.main{
宽度：100%；
}
.主体{
宽度：计算（100%-200px）；
背景颜色：粉红色；
显示：内联块；
}
.主体分区{
边缘底部：500px；
}
.侧边栏{
显示：内联块；
宽度：200px；
浮动：对；
背景颜色：黄色；
}
.侧边栏分区{
边缘底部：350px；
}
.侧边栏{
位置：固定；
右：0；
底部：0；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
侧栏第1节
侧栏第2节
侧栏第3节
侧栏第4节
侧栏第5节
如果要在右侧部分到达底部时停止滚动，则需要将
左侧部分的
最大高度
设置为该
右侧部分
高度
，还需要设置溢出属性


var sidebarHeight=$（'.Sidebar'）.height（）；
$（“.mainBody”）.css（{“max height”：sidebarHeight，“overflow-y”：“scroll”}）
.main{
宽度：100%；
}
.主体{
宽度：计算（100%-200px）；
背景颜色：粉红色；
显示：内联块；
}
.主体分区{
边缘底部：500px；
}
.侧边栏{
显示：内联块；
宽度：200px；
浮动：对；
背景颜色：黄色；
}
.侧边栏分区{
边缘底部：350px；
}

你好，世界1
你好，世界2
你好，世界3
你好，世界4
你好，世界5
侧栏第1节
侧栏第2节
侧栏第3节
侧栏第4节
侧栏第5节
您是否尝试过使用javascript？除了简单的css/html设置，我还没有看到任何东西，我还没有尝试使用Javascript。你能告诉我如何使用Javascript吗？你能分享你的java脚本吗？我还没有使用Javascript@RohitVerma