Jquery 滚动超过特定点时触发事件（css位置固定-粘性标题/导航）

我希望复制Google+在用户个人资料页面上的大封面照片。这是一个大的开始，当你滚动到某一点，标题封面照片和标签导航改变到位置：固定和坚持。您可以向上滚动，照片会再次放大。其他网站也通过其导航（即Techcrunch）实现了这一点。事实上，我甚至不需要复杂的显示/隐藏/动画一个div，它看起来有点不同，一旦它坚持，我只需要得到位置来修复

我在上面找到了其他帖子，但我的尝试都没有成功。我会注意到，我不是使用浏览器窗口滚动，而是一个内部div。。。所以我不确定这是否是我搞砸的

编辑*根据提供的评论使用新方法更新。但仍然不完美。新固定的区域不允许滚动。此外，当上面的区域都是浮动的，并且之前浮动的div丢失/修复时，保持可滚动的区域会自动跳跃。我尝试在主体部分添加一个边距顶部来抵消这一点，但不起作用

总之，以下是jQuery和JSFIDLE：

---

编辑*此外，我有一个问题无法在小提琴中复制。当我滚动到特定点时，div来回跳跃，拒绝修复。。。就好像发生了两个相互冲突的事件。但是，如果$'contentMain'，scrollTop>255px应该是$'contentMain'，scrollTop>255pxAlso，255px可能应该是引号。我已经意识到，我在这个页面上的其他代码，包括这个代码，都不能在这里使用。我的代码中似乎有错误，但不确定在哪里。我包括了你的修复，但仍然不起作用。我遗漏了一些明显的东西吗？再看看你的if语句：if$'contentMain'.scrollTop>255{}我同意，这很酷。我深入研究了源代码，似乎您添加了一个类来改变位置。我更喜欢这个解决方案，所以我试着去实现它。我或多或少都是为了工作。但是，遇到与上面相同的问题，即在固定区域上没有滚动。此外，当上面的div固定时，主体部分会跳跃。

$('#contentMain').scroll(function(){

    if ($('#contentMain').scrollTop() > 255) {

        $(this).children('#mainInfoProfileContainer').addClass('stick');

        $(this).children('#mainNavContainerProfile').addClass('stick');

        $(this).children('#body').addClass('stick');

    }

    else {

        $(this).children('#mainInfoProfileContainer').removeClass('stick');

        $(this).children('#mainNavContainerProfile').removeClass('stick');

        $(this).children('#body').removeClass('stick');

    }

});