Html 在水平滚动期间粘贴Div元素

我正在努力解决一个布局问题，我希望能找到一些帮助来解决它

我正在设计一个基于行/车道内容的页面。 每行有多个div元素和一些内容。 因此，必须能够在垂直和水平方向上滚动行

现在的问题是，每行中的第一个div元素有点像行标题，它提供了关于该行内容的一些描述

我希望这个div元素在水平滚动期间始终保持可见。 位置：固定不是选项，因为它会阻止“行标题”在垂直滚动期间与其内容一起滚动

下面是我的代码：

html，
身体{
字体系列：“Arial”，无衬线；
保证金：0；
}
* {
框大小：边框框；
}
标题{
背景：#F7F7F7；
盒影：0px2px6px0pxrgba（0,0,0,0.50）；
/**/
宽度：100%；
高度：90px；
/**/
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：固定；
z指数：55；
排名：0；
}
/*左侧边栏*/
.侧杆bg{
宽度：130px；
高度：100vh；
z指数：-1；
位置：固定；
背景：#F7F7F7；
边框：1px实心#e0；
盒影：0px 0px 6px 0px rgba（0,0,0,0.50）；
}
/*包装主要内容*/
.内容容器{
利润上限：110像素；
身高：100%；
位置：绝对位置；
宽度：100%；
} 
/*内容元素*/
莱恩先生，
.巷头，
.阶段，
.车道内容{
显示器：flex；
}
莱恩先生{
边缘底部：1.25em；
//弯曲方向：行；
对齐项目：居中；
}
.巷头{
最小宽度：130px；
背景色：#ffffff；
盒影：0px 0px 0px 1px#BFC0C2插图；
/*柔性与布局*/
弯曲方向：立柱；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
自我调整：伸展；
/**/
右边距：1米；
}
·车道标签{
字号：500；
字体大小：13px；
颜色：rgba（82,94106,0.65）；
线高：22px；
左边距：1米；
右边距：1米；
文本对齐：居中；
}
.车道内容{
z指数：-3；
}
/*网格系统*/
.col-1{最小宽度：200px；最大宽度：200px；}
.col-2{最小宽度：420px；最大宽度：420px；}
.col-3{最小宽度：640px；最大宽度：640px；}
.col-1、.col-2、.col-3{右边距：20px；}
.文本框{
填充物：0.7em 1em 1.5em 1em；
颜色：#FFFFFF；
最小宽度：200px；
最大宽度：200px；
背景色：#78BE20；
}
.阶段{
背景#005691；
自我调整：伸展；
对齐项目：居中；
填充物：0.6em 1em；
}
/*打字错误*/
.阶段{
字号：500；
字体大小：16px；
颜色：#FFFFFF；
}
.文本框h3{
字体大小：粗体；
字体大小：16px；
保证金：0.3em0；
}
.textbox p{
字体大小：正常；
字体大小：13px；
利润率：0；
}

标题
小盒子
乱数假文
培根Ipsum
卵同侧
大箱子
埃尼安康莫多
Lorem ipsum dolor sit amet，是一位杰出的领导者

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

康塞奎特
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯

您好，您还需要使用javascript，一旦您向下或向上滚动，添加一个类，比如posi_stat，它将是position:static。当您进行水平滚动时，只需删除该类即可。在默认情况下，它将是位置：固定。 类似这样，您需要删除该类，并添加scrolldown

$(function() {

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            //your code  , what should be done//
        }
    });
});

---

类似于.scrollBottom（）。scrollRight（）。向左滚动（）

好吧，多亏了这个，我找到了一个解决方案：

虽然javascript解决方案对我来说不起作用（我仍然不明白为什么），但CSS解决方案的效果相当不错

通过向.lane head类添加以下行，问题得到解决：

left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;

使用新的“position:sticky”属性，您基本上可以将任何元素粘贴到您想要的任何位置。

---

不幸的是，Chrome仍然不支持这一点，但是Safari和Firefox支持这一点。

为什么车道标题不在

中。是的，但正如我已经提到的，它们将失去与lane内容的联系。因此，在垂直滚动期间，它们与内容保持一致。感谢您的帮助，但假设您向右滚动，然后向下滚动，会发生什么情况？每当您向下或向上滚动添加类时，该类将具有位置：static，当您向右或向左滚动removeClass时，ans，在css中给出默认位置：fixedyes，但假设您已向下滚动，然后在启动Yes时，假设您已向下滚动。然后，当您开始水平滚动，并应用position:fixed时，元素将从当前流中拉出并向上跳跃。它可能停留在x轴上，但不在y轴上。