Question

我试图用一些固定/粘性元素进行水平导航。当用户滚动页面时，一些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 ......

感谢您的帮助。

的Sebastien

Answer 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

Answer 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的内容，请继续关注。您所要做的就是将header元素设置为绝对位置。

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

来缓解抖动

这只是一个起点，如果您想为此做出贡献，请分叉，看看您能做些什么。

水平滚动与粘性div元素

2 个答案: