javascript - 在标题移回页面顶部后将文本保持在原位

Question

我有一个粘性标题，在用户滚动一点后会出现一个按钮。单击该按钮时，页眉会向上移回页面顶部，但文本会向下移动。单击按钮后如何使文本保持原位。

此外，如何确保在页眉移回顶部后，文本不会使文本和页眉之间的边距加倍。这有点难以解释，但你可以自己看看。我尝试使用 <br> ，但这不起作用。

var closed = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 55 && !closed) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});
$("div.bottomMenu").on('click', function(){
    $('#header').css('position','static');
    $('div.bottomMenu').hide();
    closed = true;
});

Example fiddle

Answer 1

不要将 position 更改为 static 使用 absolute 将 header 保持在流之外:

$('#header').css('position','absolute');

演示 http://jsfiddle.net/ZyKar/709/