滑动到位置标题固定的内容

【问题标题】：Slide to content with header of position fixed滑动到位置标题固定的内容
【发布时间】：2012-04-27 05:33:05
【问题描述】：

我有一个页面，当您滚动并将 div 'fixed' 放在 top:0 右侧时，它会变为 position:fixed 以便其下方的内容滚动。

现在，在该标题上，有一些按钮可以使用滑动效果将您带到每个 div 部分。

当位置固定时，内容会向上点击大约 100 像素。

示例：http://www.screenr.com/Rbts

这是一个真实的例子：http://jsfiddle.net/Kat9s/

我怎样才能阻止它？

【问题讨论】：

标签： javascript jquery css css-position

【解决方案1】：

我添加了一个填充类。当您的固定元素变为固定时，此类将应用于您的#content。它的逻辑很简单，它会在需要时填充空间。

.filler{margin-bottom:140px}

$(window).scroll(function(){
    if( $(window).scrollTop() > stickyHeaderTop ) {
        $('#fixed').addClass("sticky");
        $('#first').removeClass("fixed");
        $('#content').addClass('filler');
    } else {
        $('#fixed').removeClass("sticky");
        $('#content').removeClass('filler');
    }
});

http://jsfiddle.net/Kat9s/1/

【讨论】：