1

我希望在用户个人资料页面上复制 Google+ 对他们的大型封面照片所做的事情。开始时很大，当您滚动到某个点时，标题（封面照片和标签导航）会更改为 position:fixed 并粘住。您可以向上滚动并再次放大照片。其他网站也已经通过导航实现了这一点（即 Techcrunch）。实际上，我什至不需要显示/隐藏/动画 div 的复杂性，一旦它粘住，它看起来有点不同，我只需要修复位置。

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

编辑*根据提供的评论使用新方法更新。虽然仍然不完美。新固定的区域不允许滚动。此外，当上面的区域粘住时，保持可滚动的区域“跳跃”（可能是因为它们都是浮动的，现在之前浮动的 div 丢失/修复了。我尝试在 body 部分添加一个 margin-top 来抵消这种情况，但没有不行。

无论如何，这里是下面的 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 来回跳跃，拒绝修复......就像发生了两个相互冲突的事件。但是，小提琴中的相同代码不会发生这种情况......

4

0 回答 0