javascript - 持久 header 导致网站高度崩溃

Question

这是我的代码:

http://jsfiddle.net/KCb5z/8/embedded/result/ http://jsfiddle.net/KCb5z/8/

$(function () {

    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
        } else if (currentScrollTop <= init && isFixed === true) {
            isFixed = false;
            $select.css('position', 'relative');
        }
    });

    $(".nav").click(function (e) {
        e.preventDefault();
        var divId = $(this).attr('href');
        $('body').animate({
            scrollTop: $(divId).offset().top - $select.height()
        }, 500);
    });

});

问题是当我滚动经过黄色栏时，它会将其 CSS 从相对更改为固定。这意味着网站现在不那么高了，它把所有的内容都拖了上去，造成了一种故障效果。

这几乎就像我需要一个包含黄色栏的 div 以保持该高度，或者插入某种 div 以保持网站高度相同(无论该栏是否停靠)。

谁能告诉我这是如何实现的？

Answer 1

当position设置为fixed时，在body的顶部添加padding以容纳它。同样，当元素未固定时删除填充:

if (currentScrollTop > init && isFixed === false) {
    isFixed = true;
    $select.css({
        top: 0,
        position: 'fixed'
    });
    $('body').css('padding-top', $select.height());
} 
else if (currentScrollTop <= init && isFixed === true) {
    isFixed = false;
    $select.css('position', 'relative');
    $('body').css('padding-top', 0);
}

Example fiddle

请注意，padding-top 可以设置在要修复的元素上方的任何元素上(如果需要)。我只使用了 body，因为它最方便作为示例。