Javascript 使用粘性div元素进行水平滚动

我正在尝试使用一些固定/粘性元素进行水平导航。 当用户滚动页面时，一些div必须保持在左侧边缘

下面是我想做的一些事情：

css
.container>div{
显示：块；
浮动：左；
}
.容器{
高度：100%；显示：块；背景：灰色；浮动：左侧；宽度：2000px；
}
.掩护{
宽度：25%；高度：100%；背景：蓝色；}
.菜单{
宽度：90px；高度：90px；背景：绿色；左边距：100px；}
.菜单.固定{
}
.固定{
}
.内容{
宽度：500px；高度：100px；背景：红色；}
菜单
内容

当绿色方块到达左边缘时，绿色和蓝色元素必须固定，红色内容位于下方

我相信它可以做jQuery

谢谢你的帮助

---

Sebastien

当滚动长度超过某个数字时，基本上会更改类别
（在这种情况下，从

.menu

中选择

左边距

）

PS：我不知道你想要红色元素做什么

---

我也有同样的问题，无法单独使用CSS找到任何解决方案。所以我制作了jQuery插件来解决这个问题。你可以找到它

现在，在你对我大喊大叫之前，让我先对你大喊大叫。这是一个BYOCSS。所以，如果您正在寻找能够为您处理CSS的东西，请继续寻找。您所要做的就是在绝对位置设置header元素的样式

这个插件仍在开发中，需要一些改进。当你滚动时有点紧张。您可以通过CSS3

转换来缓解抖动：90ms

这仅仅是一个起点，如果你想为之做出贡献，就把它交出来，看看你能做些什么。
谢谢你的回答。几乎是这样，但当绿色内容到达边界时，蓝色内容必须保持其位置，目前存在一个间隙。红色内容必须跟随蓝色封面，并在绿色正方形到达边界时开始滑下。谢谢@Spokey
css

.container>div {

display:block;
float:left;
}

.container { 
height:100%; display:block; background:grey; float:left; width:2000px;
}

.cover{
width:25%; height:100%; background:blue; }

.menu{
width:90px; height:90px; background:green; margin-left:100px; }

.menu.fixed{
}

.cover.fixed{
}

.content{
width:500px; height:100px; background:red; }



<div class="container">
<div class="cover" >
       <div class="menu">Menu</div>
</div>
<div class="content">content</div>

$(window).scroll(function () {
    var sl = $(this).scrollLeft();
    if (sl > 100) { // 100 is margin-left from .menu
        $('.menu').addClass('fixed');
        $('.cover').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
        $('.cover').removeClass('fixed');
    }
});