Question

我希望在用户个人资料页面上复制Google+对其大封面照片所做的工作。它很大，当你滚动经过某个点时，标题（封面照片和标签导航）会变为位置：固定并粘住。您可以向上滚动并再次放大照片。其他网站也一直在实施这一功能（即Techcrunch）。我实际上甚至不需要显示/隐藏/动画一个看起来有点不同的div的复杂性，一旦它坚持，我只需要得到解决的位置。

我在其上发现了其他帖子，但我的尝试都没有奏效。我会注意到我没有使用浏览器窗口滚动，而是使用内部div ...所以不确定这是不是我搞砸了。

根据提供的评论，使用新方法更新编辑*。虽然还不完美。新固定的区域不允许滚动。另外，当上面的区域粘住时，仍然可滚动的区域“跳跃”（可能是因为它们全部浮动，现在先前浮动的div缺失/固定。我尝试在身体部分添加边缘顶部以抵消这一点，但不是不行。

无论如何，这里是以下jQuery和jsfiddle：

http://jsfiddle.net/md3DV/43/

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

    }

});

编辑*此外，我有一个问题，我不能在小提琴中复制。当我滚动到特定位置时，div来回跳跃，拒绝修复......就像发生了两个相互冲突的事件。但是，小提琴中的代码不会发生......

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

0 个答案: