滑動至內容，標題固定

Question

我有一個頁面，當您滾動並將“固定”的div position:fixed top：0右時，它將變為position:fixed以便其下面的內容滾動。

現在，在該標題上有一些按鈕，可以使用滑動效果將您帶到每個div部分。

位置固定后，內容會增加約100像素。

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

這是真實的示例： http : //jsfiddle.net/Kat9s/

我該如何阻止呢？

Answer 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/