在标题移回页面顶部后保持文本到位

时间:2014-01-07 17:08:36

标签: javascript jquery html css

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

此外,如何在标题移回顶部后确保文本与文本和标题之间的边距量不会加倍。它有点难以解释,但你可以自己看。我尝试使用<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

1 个答案:

答案 0 :(得分:1)

请勿将position更改为static使用absolute以保持标题不在流量范围内:

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

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