带有粘性 div 元素的水平滚动答案

【问题标题】：Horizontal scrolling with sticky div elements带有粘性 div 元素的水平滚动
【发布时间】：2014-01-16 12:13:39
【问题描述】：

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

这是我想做的事情：

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>

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

我相信它可以做 jQuery...

感谢您的帮助。

塞巴斯蒂安

【问题讨论】：

标签： javascript jquery css html horizontal-scrolling

【解决方案1】：

当滚动长度超过某个数字时，您基本上会更改类
（在这种情况下，margin-left 来自.menu）

$(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');
    }
});

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

FIDDLE

【讨论】：

感谢您的回答。差不多了，但是当绿色的内容到达边界时，蓝色的内容必须保持其位置，目前有一个间隙。红色内容必须跟随蓝色封面，并在绿色方块到达边界时开始向下滑动。谢谢@Spokey

【解决方案2】：

我遇到了同样的问题，但无法单独使用 CSS 找到任何解决方案。所以我做了一个jQuery插件来解决这个问题。你可以找到它here。

Well, I had a great gif here demonstrating what it does but SO doesn't support it. You'll have to click this to see it.

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

此插件仍在开发中，需要一些改进。滚动时有点紧张。您可以使用 CSS3 transition: 90ms; 来缓解抖动

这只是一个起点，如果你想为它做出贡献，就分叉它，看看你能做什么。

【讨论】：