用粘性div元素水平滚动

我试图做一些固定/粘性元素的水平导航。当用户滚动页面时，一些div必须停留在左边缘。用粘性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 ...

谢谢你的帮助。

塞巴斯蒂安

来源

2014-01-16 Sebastien-Gath

你根本上改变了上课的时候滚动长度超过一定数量
（在这种情况下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

来源

2014-01-16 12:29:09 Spokey

谢谢你的回答。几乎就是这样，但当绿色内容到达边界时，蓝色内容必须保持其位置，目前存在差距。红色内容必须跟随蓝色封面，并在绿色方块到达边界时开始滑动。谢谢@Spokey –